Tutorial : BORDER STYLING COMMANDS IN CSS – BRACKETS Turkish Video Tutorial
Video : Turkish Language
Githup link: BRACKETS
With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers. More information for BRACKETS LINK
What We Can Learn?
We learn Css border types and their individual properties in this video tutorial.
We Learn About
Border Stlyling
Used => Grove, ridge, outset, inset, double
Used => width, height
background-image
Used =>url name, scale value
Box-shadow
Used =>Shadow value and color value
And old commands…
Used =>margin-right, padding
Requirements
1-Brackets Program
2-Basic HTML code knowledge
3- Basic CSS code knowledge
4- Basic Brackets usage information
Difficulty
Basic Level – Intermediate Level
Description
We continue to learn CSS in this video. In the video, I talked about CSS; Border Stlyling (Grove, ridge, outset, inset, double), border value (width, height), background-image, (url name, scale value), Box-shadow (Shadow value and color value) and old commands(margin-right, padding).
Video Tutorial - Turkish Language - 720p
Curriculum
If you want to learn more about Css in Brackets, I've made some video tutorials about Css before, you can see them below !!
https://steemit.com/utopian-io/@tarikhakan55/background-styling-commands-in-css-brackets-turkish-video-tutorial
https://steemit.com/utopian-io/@tarikhakan55/text-styling-commands-in-css-brackets-turkish-video-tutorial
https://steemit.com/utopian-io/@tarikhakan55/font-styling-commands-in-css-brackets-turkish-video-tutorial
https://steemit.com/utopian-io/@tarikhakan55/styling-methods-and-types-of-styling-in-css-brackets-turkish-video-tutorial
And More Details From This Video
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS DERSLERİ SERİSİ KENARLIK</title>
<link rel="stylesheet" type="text/css" href="kenarstil.css">
</head>
<body>
<p class="groove">Groove</p>
<p class="ridge">Ridge</p>
<p class="outset">Outset</p>
<p class="inset">Inset</p>
<p class="double">Double</p>
<p class="image">Image</p>
</body>
</html>
p.groove{
width: 200px;
height: 200px;
border:15px groove red;
margin-right: 10px;
float:left;
border-radius: 50px 25px;
box-shadow: 10px 10px black;
}
p.ridge{
width: 200px;
height: 200px;
border:15px ridge red;
margin-right: 10px;
float:left;
border-radius: 20px;
box-shadow: 10px 10px blue;
}
p.outset{
width: 200px;
height: 200px;
border:15px outset red;
margin-right: 10px;
float:left;
border-radius: 0px 50px 0px 25px;
}
p.inset{
width: 200px;
height: 200px;
border:15px inset red;
margin-right: 10px;
float:left;
}
p.double{
width: 200px;
height: 200px;
border:15px double red;
margin-right: 10px;
float:left;
box-shadow: 10px 10px black;
}
p.image{
width: 200px;
height: 200px;
border:15px solid transparent;
padding: 30px;
margin-right: 10px;
float:left;
border-image: url(logo.png) 30;
}
Author : @tarikhakan55
Steemit Türkiye & Utopian-io
Community
Posted on Utopian.io - Rewarding Open Source Contributors