Bu bölümde, en sık kullanılan ve bazen de engelleyici olan CSS geliştirme görevlerinin çoğunu çözecek 25 CSS snippet’leri ve hackleri bulunmaktadır.
Önceden yazılmış, zaman kazandırıcı pek çok CSS kod snippet’leri varken tekerleği neden yeniden icat edesin ki?
Bazı ebedi ve klasik CSS hacklerinin yanında, kutu bölgesi, sınır yarıçapı, lineer gradyanı gibi pek çok CSS3 snippet’lerini burada bulabilirsin.
Metine gölge eklemek / text-shadow
Metninizi, geri kalan kısımdan ayrıştırmaya yardım eder.
.text-shadow {
text-shadow: 2px 2px 4px #666;
}
Görüntü bazlı çerçeve eklemek / border-image
Bunu kullanarak, web sitenizde, istediğiniz nesneler için her türlü sınırı yaratabilirsiniz. Kendi border.png görüntünüzü ayarlayın ve nesnenin üstüne görüntü bazlı çerçeveyi eklemek için border-image özelliğini uygulayın.
#border-image-style {
border-width:15px;
/* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
-moz-border-image:url(border.png) 30 30 stretch ;
-webkit-border-image: url('/border.png') 30 30 stretch;
}
Çerçevelere ve görüntülere gölge eklemek / box-shadow
Çerçevelerinizin ve görüntülerinizin arka plandan daha öne çıkmasını sağlar ve ziyaretçilerin bakacakları ön planda, ayrılmış şekilde usta işi 3D benzeri görsel bir işaret oluşturur.
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
Yuvarlak köşeler eklemek / border-radius
CSS3 bazlı elementlerinize, sınır veya buton gibi yuvarlak köşeler ekleyin. Köşelerin yuvarlaklığını azaltmak ya da artırmak için yarıçapını değiştirebilirsiniz. Bu her bir köşeyi genel olarak yuvarlamanızı sağlar; sonraki kod snippet ise dört köşenin her birini ayrı ayrı yuvarlayabilmenize yardım eder.
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
Ayrı olarak yuvarlanmış köşeler eklemek / border-radius
Ayrıca, dört köşeden hangisinin yuvarlanacağını seçebilir veya tüm köşelerin genel olarak yuvarlanmasını sağlayabilirsiniz.
#Bottom_Right {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Bottom_Left {
height: 65px;
width:160px;
-moz-border-radius-bottomleft: 50px;
border-bottom-left-radius: 50px;
}
#Top_Right {
height: 65px;
width:160px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
}
#Top_Left {
height: 65px;
width:160px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
}
Gradyan eklemek / linear-gradient
CSS3 ile birlikte, gradyanlar için arka plan görüntüsüne ihtiyacınız kalmaz, bir şeyin arka planına gradyan eklemek için CSS kullanabilirsiniz. Renk hex değerlerini (“74b8d7¨ ve “437fbc”) , istediğiniz renk gradyanına göre değiştirin.
background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top, #74b8d7, #437fbc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColor
Sayfa sonu yazdırıcısı eklemek / page-break
Ziyaretçiniz sayfayı yazdırmak istediğinde, web sitenizdeki makalelere veya diğer, uzun formdaki içeriğe, hoş sayfa sonları ekler.
.page-break{
page-break-before:always;
}
Hızlıca tanıtım kutuları yaratmak / pull-quotes
Tanıtım kutusu, bir makaleden ayrışan, değişik formatlanmış bir alıntıdır ve bir anahtar açıklamayı ya da diğer bir metni vurgulama amaçlı oluşturulmuştur. Her bir metne tanıtım kutusu eklemek istediğinizde, her seferinde metni formatlamanızdan daha kolay iş yapmanızı sağlar. Buna göre, fontu ve font rengini, Georgia, "Times New Roman", Times, seri ve ff0000 ile değiştirin.
.pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ;
}
Web sitenizi yatay olarak ortalayın
Yüksek çözünürlüklü, geniş ekranlı bilgisayarların olduğu bu dönemde, her şeyin 1999’lı yıllardaki gibi sola yaslanmış olması elbette can sıkıcıdır. Sitenizin aynı akıbeti yaşamaması için sitenizi yatay olarak ortalayın.
.wrapper {
width:960px;
margin:auto;
}
Belirli bir içeriği dikey olarak ortalamak
Üç kat daha hızlıdır ve bir kap içindeki (HTML tablosunun bir hücresi gibi) içeriği dikey olarak ortalayacaktır.
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
Altbilginize sabit bir pozisyon vermek / position-fixed
Bu, altbilginizin ekranın altına yapışmasını sağlar. Arka plan rengini de ihtiyacınıza göre değiştirirsiniz.
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Uygun görüntü yüklemek için “görüntü yükle” bölümü eklemek
Portföy ve galeri siteleri gibi yüksek çözünürlüklü, görüntü ağırlıklı siteler için kullanışlıdır. Ziyaretçilerin sayfayı yenilemeleri ya da daha başka bir işlem yapıp yapmamaları gerektiğini merak ederek sayfanın boş bölümüne bakakalmamaları için, “yükleme döngüsünde”, her şeyin yolunda gittiği ve yüklemenin devam ettiği konusunda görsel olarak bilgi veren animasyonlu bir GIF görüntüsü kullanabilirsiniz.
Animasyonlu GIF sizde mevcut değilse, Ajaxload – Ajax loaing GIF generator aracılığıyla kendinizinkini yaratabilirsiniz.
img {
background: url('/loader.gif') no-repeat 50% 50%;
}
Başlık metnini logo ile değiştirmek / text-indent
Bu kod, web sitenizin üstbilgi kısmındaki başlık metnini gizleyip bunu logo görüntüsü ile değiştirirken aynı zamanda SEO (arama motoru optimizasyonu) amaçları için web sitenizin başlığındaki metni korumak için kullanılır.
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
“Başlangıcı büyüt” özelliği ekleme
Tüm klasik stillerde, makalenizin ilk harfinin diğerlerinden daha büyük olmasını sağlar.
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
Saydamlık kullanma / opacity
Bunun aracılığıyla, web sitenizdeki bir kutuyu ya da herhangi bir nesneyi, opasite değerlerini değiştirerek istediğiniz ölçüde saydam hale getirebilirsiniz.
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
<div>Your content</div>
Link stillerine bağlı dosya formatı
Bu snippet, belirli dosya formatının linkine bitişik küçük ikonları gösterir. Aşağıda, email, pdf ve zip dosya linkleri için link stillerine bağlı dosya formatlarını bulabilirsiniz. Siz de “kopyala/yapıştır” ve “kendi uzantını ekle” (mesela “.mp3¨) gibi benzerlerini ekleyebilirsiniz.
/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
content: url('/icons/zip.png');
}
Arka plan görüntünüzü yeniden boyutlandırın
Başlıkta da belirtildiği gibi bu işlem, büyüklük değerlerini basitçe değiştirmenizi ve arka plan görüntüsünü yeniden boyutlandırmanızı sağlar.
#resize-image {
/* Just imagine that the image_1.png is 200x400px */
background: url('/image_1.png') top left no-repeat;
-moz-background-size: 100px 200px;
-o-background-size: 100px 200px;
-webkit-background-size: 100px 200px;
}
Çoklu sütun eklemek
Bu işlem, ayrı paragraflar yaratmak için formatlama sorunları yaşamadan içeriğiniz için çoklu sütunlar yaratmanızı sağlar. Sütun sayısını istediğiniz miktara göre değiştirebilirsiniz. Rengi değiştirebileceğiniz veya tamamen ortadan kaldırabileceğiniz dikey, gri, ayırıcı satırlar dahil değildir.
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
CSS Sprite benzeri Temel Link Yenilenmesi
Bunu kullanarak bant genişliğini kaydedin ve butonunuzun ayrı “gezinme” versiyonunu sorunsuz şekilde yaratın. Bu, gezinme etkisi yaratarak, üstünde gezindiğinizde butonunuzun arka plan görüntüsünü aşağı taşır.
a {
display: block;
background: url('/sprite.png') no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
Korunaklı @font-family
Bu, Fontspring @font-face sözdizimidir:
@font-face {
font-family: 'MyFontFamily';
src: url('/myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Google fontları eklemek
Bunu, Google font API eklemek için kullanabilirsiniz. Bu da web sitenizin tüm tarayıcılar ve bilgisayarlar için güzel görünümlü fontlara sahip olmasını sağlar, böylece web sitenize ayrıca font yüklemeyle uğraşmanızı ve ziyaretçilerin uygun fontlarla karşılaşıp karşılaşmadığı kaygısı (özgüvensiz tasarımcının yaşayacağı şekilde) yaşamanızı önler.
Önce:
<!-- Some special fonts -->
/* Single font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans"><!-- Some special
CSS’nizde:
body {
font-family: 'Droid Serif', serif; font-size: 48px;
}
Görüntüyü çevirmek / transform
Düşündüğünüzden daha kullanışlıdır. Bütün olarak ayrı bir görüntüyü manuel olarak çevirmek ya da yüklemek istemediğinizde kullanacağınız bir buton, ok ya da diğer bir işlevsel grafik oluşturmanızı sağlar.
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Bir görüntüyü veya metni döndürmek- transform
Herhangi bir görüntüyü, metni veya teknik bir elementi döndürmenizi sağlar. Döndürme değerini, saat yönünün tersi döndürme için “-“ ekleyerek (snippet’te olduğu gibi) istediğiniz açıya göre düzenleyin.
/* for firefox, safari, chrome, and any other gecko/webkit browser */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* opera */
-o-transform: rotate(30deg);
İçerik alanının boyutunu değiştirmek
Bununla, içerik alanınızı daraltabilir veya genişletebilirsiniz.
#content {
width: 100%;
margin: 0;
float: none;
}
Tarayıcının Kapsamlı Listesi / Özel CSS Hack’leri
CSS kullanımıyla birlikte, IE, Firefox, Chrome, Safari ve Opera kullanımınız daha etkin hale gelecektir.
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue; }
/* IE7, IE8 */
#veinte { color/*\**/: blue; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone {color: blue{xtypo_code}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
{/xtypo_code}/;} /* must go at the END of all rules */
Eric Meyers CSS reseti
CSS reseti, stil sayfanızdaki tüm tutarsızlıkları resetler, böylece web siteniz tüm tarayıcılar için uyumlu hale gelir. Kenarlıklar, font boyutları, varsayılan satır yükseklikleri ve benzeri şeyler düzenlenir. Aşağıdaki, Eric Meyers tarafından hazırlanmış CSS reseti, sıralama standartı haline gelmiş olup dolasıyla da “nihai” bilgi imidir.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Tüm renkleri resetlemek ve link rengini değiştirmek
Bu, tüm metin ve arka plan renklerini resetler, böylece silbaştan siyah metne geri dönersiniz. Sonra, metindeki linkleri belirgin hale getirmek için rengini ve stilini değiştirebilir ve böylece görünür hale getirebilirsiniz.
* {
color: black !important;
background-color: white !important;
background-image: none !important;
}
a:link {
font-weight: bold;
text-decoration: underline;
color: #06c;
}
