CSS

CSS ile Kalp Çizmek

0 Comments

Arkadaşlar sizinle bugün CSS3 ile bir kalp çizelim.

İlk önce html dosyamızı oluşturup Body nin içine bir div etiketi oluşturalım. Classı kalp olsun. Sonra css dosyamızı oluşturup html dosyasına çağıralım.

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Kalp</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="kalp"></div>
	</body>
</html>

 

Şimdi css dosyamızı kodlamaya başlayalım. Div etiketini bulunduğu pozisyona göre değiştirmek için position: relative yapalım.

Yüksekliği 170px yapalım.

Genişliği 200px yapalım.

Dışarıdan 20px boşluk verelim.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

div etiketinden önce ve sonra işlem yapabilmek için before, after tanımlayalım.

Pozisyonunu absolute yapalım. Diğer nesnelerden bağımsız olsun.

Yükseliği 160px, Genişliği 100px olan iki nesne oluşturalım.

Arkaplanını kırmızı yapalım.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
}

İki şekil arka arkaya olduğu için birmiş gibi görünüyor.

SnapCrab_No-0087

Birinci şekli sola yaslayalım. Diğer şekli soldan 100px genişlik kadar boşluk bırakalım.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
}

.kalp:before{
	left: 100px;
}

.kalp:after{
	left: 0px;
}

SnapCrab_No-0088

Birinci şekli döndürmek için başlangıç noktasını alt, sağ noktayı referans olarak alalım ve sağa 45 derece açıyla döndürelim. İkinci şekli döndürmek için ise alt sol noktayı referans alalım ve sola doğru 45 derece açıyla döndürelim. Net görebilmek için border verelim.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
	border: 1px solid #000;
}

/* birinci şekil */
.kalp:after{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);

	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;

	left: 0px;
}

/* ikinci şekil */
.kalp:before{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);

	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	
	left: 100px;
}

SnapCrab_No-0089

Üst köşe kenarlarını yuvarlak yapalım ve kenarlığı kaldıralım.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
	border-radius: 50px 50px 0 0;
}

/* birinci şekil */
.kalp:after{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);

	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;

	left: 0px;
}

/* ikinci şekil */
.kalp:before{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);

	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	
	left: 100px;
}

SnapCrab_No-0090

 

Sağlıcakla kalın, Hayırlı günler…

CSS Seçiciler (Selectors)

0 Comments

Selamün Aleyküm Arkadaşlar;

CSS bildirim ve seçici olmak üzere ikiye ayrılır. Bir stili uygulayabilmek için bir XHTML/HTML’de element veya elementleri seçmek gerekir.

div {
	margin-left: 10px;
}

div seçici, [margin-left: 10px] ise bildirimdir. Bildirimler özellik ve değerden oluşur.

margin-left özellik; 10px ise değerdir. Değerin sonuna ; konularak diğer bildirime geçilir.

Her seçici yazıldıktan sonra { ile başlar } kapatılır. {} içinde bildirimler yer alır.

[table]

Seçici Açıklama
* Tüm elementleri seçer.
E Element etiketine göre seçer. div, a, p, h1 vs.
E F E elementinin soyundan gelen F elementlerini seçer.
E > F E elementine bağlı olan F elementlerini seçer.
E:first-child E elementinin ilk elementini seçer.
E:link Ziyaret edilmemiş, tıklanmamış elementleri seçer.
E:visited Ziyaret edilmiş, tıklanmış elementleri seçer.
E:active Elemente tıklandığı zaman çalışır.
E:hover Elementin üzerine gelindiğinde çalışır.
E:focus Elemente odaklanıldığında çalışır.
E[ozellikisim] ozellikisim özelliği olan bütün elementleri seçer. Değerine bakılmaz.
E[ozellik=”deger”] Özelliği deger kelimesine eşit olan elementleri seçer.
E[ozellik~=”deger”] Özelliğinde deger kelimesi geçen elementleri seçer.
E[ozellik|=”deger”] Özelliği deger-… olan elementleri seçer.
E.classisim class özelliği classisim eşit olan ve E elementlerini seçer.
E#idisim id özelliği idisim eşit olan ve E elementlerini seçer.

[/table]

Evrensel Seçici (Universal Selector)

Evrensel seçici “*” gösterilir. Bütün elementleri seçer.

* {
    color: red;
}

 

Element Seçici (Element Selectors)

Bir elementi etiketine göre seçmek için seçmek istediğimiz elementin etiketini yazmamız gerekir.

Örnekte h1 etiketleri seçilip font rengi kırmızı yapılmıştır.

h1 {
    color: red;
}

Bir elementin içinde yer alan bir başka elementin seçmek için Ana elementin etiketini yazıp boşluk o elemente bağlı seçmek istediğimiz elementin etiketini yazarız.

Örnekte div içinde yer alan p elementlerinin yazı boyutu, rengi ve arkaplan rengi değiştirilmiştir.

div p {
    font-size: 14px;
    color: white;
    background: #000;
}

Bir elemente bağlı olan elementleri seçmek için Bağlı olduğu element etiketi > Seçilecek Element etiketi şeklinde yazılır. (E > F)

Örnekte ul elementine bağlı olan li elementlerinin arkaplan rengi ve yazı rengi  değiştirilmiştir.

ul > li {
    background: #000;
    color: #fff;
}

 

Özellik Seçicileri (Attribute Selectors)

E[attr] attr özelliği olan tüm E elementleri seçer.

E[attr=”deger”] attr özelliği deger eşit olan E elementleri seçer.

E[attr ~= “deger”] attr özelliği deger[boşluk]… olan E elementlerini seçer.

E[attr |= “deger”] attr özelliği deger-… olan E elementlerini seçer.

input[name]{
    background: #000;
    color: #fff;
    display: block;
}

input[value="metin"]{
    background: red;
    color: yellow;
    display: block;
}

input[value~="metin"]{
    font-weight: bold;
    display: block;
}

input[value|="metin"]{
    border: 2px dashed yellow;
}

 

Sınıf Seçicisi (Class Selector)

class özelliğine göre bir elementi seçmek için .classisim kullanılır.

div.container{
    border: 1px solid #000;
    background: #ddd;
}

 

Id Seçicisi (Id Selector)

Id özelliğine göre elementleri seçebiliriz. #iddeger olarak kullanılır.

div#item1{
    border: 1px dashed #ccc;
    background: #fff;
    font-weight: bold;
}

Pseudo-classes

E:active E elementine mouse ile tıklandığı zaman tetiklenir.

E:hover E elementinin üzerine mouse ile gelince tetiklenir.

E:link Hiç tıklanmamış, bağlı link hiç ziyaret edilmemiş E elementleri seçilir.

E:visited Tıklanmış, ziyaret edilmiş E elementleri seçilir.

E:not(seçici) E elementinin içinden not(seçicide tanımlanmış) hariç olanlar seçilir.

E:target URL sonunda #deger ile gelen E elementinin içinde, id özelliğine eşit olan  seçilir.

a:link{
    color: red;
}

a:visited{
    color: green;
}

a:hover{
    color: black;
}

a:active{
    color: orange;
}

body > *:not(div){
    background: #000;
    color: #fff;
}

#con:target{
    color: red;
}

Pseudo-elements

E:before E elementinden önce içerik ekler.

E:after E elementinden sonra içerik ekler.

E:first-letter E elementinde ilk harfi seçer.

E:first-line E elementinde ilk satırı seçer.

E::selection E elementinde kullanıcı mouse ile alanı seçtiğinde tetiklenir. Mozilla tarayıcında çalışmaz. Mozilla tarayıcında ::-moz-selection bu kod aynı işlemi yapar.

p:before{
    padding-right: 5px;
    content: "P. başı";
}

p:after{
    padding-left: 5px;
    content: "P. sonu";
}

p:first-line{
    color: red;
    background: #000;
}

p:first-letter{
    color: yellow;
}

p::selection{
    background: green;
    color: white;
}

/* Mozilla için */
p::-moz-selection{
    background: green;
    color: white;
}


 

UI state pseudo-classes

E:checked E elementinden checked veya selected özelliği olanı seçer.

E :disabled E elementinde disabled özelliği olan, inaktif elementler (form elementleri) seçilir.

E :enabled E elementinde disabled özelliği olmayan, aktif elementler (form elementleri) seçilir.

E:focus E elementine mouse veya klavye (tab ile) ile odaklanıldığında tetiklenir.

E:read-only E elementinde readonly özelliği olanlar seçilir.

E:read-write E elementinde readonly özelliği olmayanlar seçilir.

option :checked{
    color: red;
    background: yellow;
}

input[type="checkbox"]:checked{
    margin-left: 20px;
}

input[type="radio"] :checked{
    margin-left: 20px;
}

form#form1 > *:enabled{
    background: red;
}

form#form1 > *:disabled{
    background: lime;
}

form#form1 > *:focus{
    width: 50px;
}

form#form1 > *:read-only{
    background: yellow;
}

form#form1 > *:read-write{
    background: orange;
}

E:valid E elementinde pattern özelliğindeki kural sağlanıyorsa tetiklenir.

E:invalid E elementinde pattern özelliğindeki kural sağlanmıyorsa tetiklenir.

Not: E:valid ve E:invalid HTML5 pattern özelliğine aittir.

input:valid {
    border: 1px solid green;
}

input:invalid {
    border: 1px solid red;
}

Hayırlı günler, sağlıcakla kalın.

Bu döküman www.ibasoglu.com’a aittir. Kaynak belirtmek suretiyle alıntı yapılabilir.

CSS Nedir?

2 Comments

Selamün Aleyküm Arkadaşlar;

CSS (Cascading Style Sheets) türkçe olarak stil şablonları anlamına gelir. XHTML/HTML etiketlerini biçimlendirmek için yani stil vermek için kullanılır. Herhangi bir metin editörüyle notepad vb. programlarla yazabiliriz. Dosyası .css uzantılıdır.

CSS öğrenmeden önce XHTML/HTML kodlarını bilmemiz gerekir. Sonra CSS öğrenmeliyiz.

CSS ile neler yapabiliriz?

Bütün XHTML/HTML etiketlerine stil verebiliriz. Mesela bir yazının rengini, fontunu, font boyutunu, arkaplanın rengi vs. değiştirebiliriz.

CSS kodları üç şekilde bulunur. Bunlar Dahili, harici ve XHTML/HTML etiketinin style özelliğinde tanımlanır.

Harici Stil Kullanımı (External Style Sheet)

.css uzantılı bir dosyaya CSS kodlarımızı yazıp link etiketiyle HTML sayfasına dahil edilmesidir.

Örnek olarak kullanım:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		...
	</body>
</html>

 Dahili Stil Kullanımı (Internal Style Sheet)

XHTML/HTML sayfasının içindeki style etiketinde, CSS kodlarının yer almasıdır.

Örnek olarak kullanım:

<html>
	<head>
		<style type="text/css">
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		...
	</body>
</html>

Etiket İçinde Kullanımı (Inline Style)

Bir XHTML/HTML etiketinin style özelliğinde tanımlanmasıdır.

Örnek olarak kullanım:

<html>
	<head>
	</head>
	<body>
		<p style="color: red;">Paragraf...</p>
	</body>
</html>

 

Hayırlı günler, sağlıcakla kalın.

Bu döküman www.ibasoglu.com’a aittir. Kaynak belirtmek suretiyle alıntı yapılabilir.