Css 3 son günlerde internet dünyasında duyulmaya baÅŸladı gerçi uzun zamandır var ama kullanmak biraz cesaret istiyor. Ä°ÅŸte internet tarayıcılar ccs3 kodlarını desteklermi korkusu var. Gerçi ÅŸu anda explorer sürümleri hariç bütün internet tarayıcıları css 3 kodlarını desteklemekte ama halen günümüzde explorer kullananların sayısı çok fazla microsoft bu konuda biraz hassas olsa çok iyi olacak ama halen bu konuda böyle davranıyor bir türlü anlamış deÄŸilim. Neyse ÅŸimdi Css 3 ile bazı örneklerimiz var yazılara veya divlere gölge vermek, sonra gradients yazı veya  kutular oluÅŸturmak sonra kenarları yuvarlak kutular oluÅŸturmak gibi…

Yazıya ve Div lere gölge vermek

CSS kodlarımız

.shadow1 {
	background-color: #eee;
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
	color: black;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}
.shadow2 {
	background-color: #333;
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
	-webkit-box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
	-moz-box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
	color: white;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}

HTML KODLARIMIZ

<p>&nbsp;<span class="shadow1">Shadow</span> &nbsp; <span class="shadow2">Glow</span></p>

GRADÄ°ENTS YAZI KUTULAR YAPMAK

CSS KODLARIMIZ

.gradient1 {
	background-color: #fed;
	background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #fffffa),
            color-stop(100%, #900)
          );
	background: -moz-linear-gradient(
            top, #fffffa, #900 100%
          );
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	color: white;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}
.gradient2 {
	background-color: #333;
	background: -webkit-gradient(
            linear,
            right top, left bottom,
            color-stop(0%, #336),
            color-stop(50%, #6cc),
            color-stop(100%, #ffc)
          );
	background: -moz-linear-gradient(
            right top, #336, #6cc 50%, #ffc 100%
          );
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	color: black;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}

HTML KODLARIMIZ

<p>&nbsp;<span class="gradient1">Gradient</span> &nbsp;
<span class="gradient2">Gradient</span></p>

KENARLARI YUVARLAK KUTUCUKLAR YAPMAK,

CSS KODLARIMIZ

.round1 {
	background-color: #f99;
	border: solid 1px black;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	color: black;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}
.round2 {
	background-color: #333;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-top-left-radius: 59px 20px;
	-webkit-border-bottom-left-radius: 59px 20px;
	-moz-border-radius-topleft: 59px 20px;
	-moz-border-radius-bottomleft: 59px 20px;
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	color: white;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}
.round3 {
	border: dashed 2px #093;
	-webkit-border-top-left-radius: 17px;
	-moz-border-radius-topleft: 17px;
	-webkit-border-bottom-right-radius: 17px;
	-moz-border-radius-bottomright: 17px;
	background-color: #ff9;
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	color: black;
	font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
	font-size: 10pt;
}

HTML KODLARIMIZ

<p>&nbsp;<span class="round1">Round Corners</span> &nbsp; <span class="round2">
Round Corners</span> &nbsp; <span class="round3">Round Corners</span></p>

Be Sociable, Share!

•