css

Adım 1 – Platform Seçimi Daha önce de bahsettiğimiz gibi site kurulumu için 3 ana yol vardır. CMS – İçerik Yönetimi Sistemi Kullanmak: İçerik yönetimi sistemlerini web siteleri ve web sitelerini oluşturan içerikleri yayınlamak için kullanılabilecek gelişmiş geliştirici araçları olarak...

<ul id="menu"> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Hakkımızda</a> <ul> <li><a href="#">Şirket Tarihçesi</a></li> <li><a href="#">Yöneticilerimiz</a></li> <li><a href="#">Çalışanlarımız</a></li> <li><a href="#">Faaliyetlerimiz</a></li> </ul> </li> <li><a href="#">Hizmetlerimiz</a>...

#form-alan{ width: 600px; margin-top: 25px; } #form-alan input, #form-alan textarea { padding: 5px; width: 471px; font-family: Helvetica, sans-serif; font-size: 1.4em; margin: 0px 0px 10px 0px; border: 2px solid #ccc; } #form-alan textarea { height: 90px; } #form-alan textarea:focus...

body{ background: #282838; height: 100%; } .polaroid { position: relative; width: 300px; float: left; margin:20px; } .polaroid img { border: 10px solid #fff; border-bottom: 45px solid #fff; -webkit-box-shadow: 3px 3px 3px #777; -moz-box-shadow: 3px 3px 3px #777; box-shadow: 3px 3px 3px #777...

.yuvarla { width: 100px; height: 100px; line-height: 100px; text-decoration: none; text-align: center; font-size: 25px; text-shadow: 0 1px 0 rgba(255,255,255,.7); letter-spacing: -.065em; box-shadow: 2px 2px 7px rgba(0,0,0,.2); border-radius: 50%; -webkit-transition: all .25s ease-in-out...

.yuvarla { border-radius: 50%; } <img class="yuvarla" src="https://unsplash.it/300/300/?random">

button.ornek { -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -o-transition: all 0s ease-out; -ms-transition: all 0s ease-out; transition: all 0s ease-out; height: 35px; display: block; font-family: Arial, "Helvetica", sans-serif; font-size: 14px; color: #fff...

#personel { border-collapse: collapse; width: 100%; background-color: #ecf0f1; font-weight: bold; } #personel td, #personel th { padding: 8px; } #personel th { background: #3498db; padding-top: 12px; padding-bottom: 12px; text-align: left; color: #fff; } #personel td{ color:#2c3e50; }...

.yuvarla { border-radius: 50%; } <img class="yuvarla" src="https://unsplash.it/300/300/?random"> - <img class="yuvarla" src="https://unsplash.it/300/300/?random">

CSS (Cascading Style Sheet), HTML ile doğrudan ilişkilidir. HTML öğelerinin kullanıcıya sunuş biçimini belirler aslında. HTML?de olduğu gibi Jquery ve JavaScript içinde CSS önemlidir. 130?dan fazla CSS özelliği bulunmaktadır. Tarayıcı da bir HTML dokümanı görüntülendiğinde ve bu doküman içinde...

CSS özellikleri içinde en sık kullanılan özellik renk tanımlamalarıdır. Bunun için color özelliğinden faydalanıyoruz. Renkleri tanımlarken de bir kaç yoldan yararlanabiliyoruz. 3 farklı yollara renkleri tanımlayabiliyoruz. Birincisi direkt rengin adını vermek; red, yellow, darkblue, black, white...

HTML ile oluşturulmuş formlar ve form elemanlarının göze hitap etmesi için CSS ile ufak dokunuşlar yapabiliriz. Bu örnekte HTML sayfasına eklemiş olduğumuz checkbox kontrollerini CSS ile biçimlendireceğiz. Örnekte bitişik kardeş seçiciler ve Font Awesome kullanılmıştır. Kodlara ve örneğin...

Aslında bakarsanız programlama bilgisayara uygun dilde verilen emirlerle yapılır. Programlama esnasında bu emirlerin çoğunu programcının vereceği gibi bazılarının da programı kullanan kişi tarafından verilmesi beklenir. Programlama çok kolay olsa da herkesin programcı ya da bilgisayar kurtları...

max-height özelliği, bir elemanın maksimum içerik yüksekliğini belirlemenizi sağlar. Elemanımızın içi çok dolu olsada maximum yüksekliği geçmeyecektir. Bu maksimum yükseklik padding sınırları ya da kenar boşluklarını içermez. Not: max-height daha büyük değer verilen yükseklik(height)...

CSS, sayfadaki metnin görünümünü ve biçimini düzenlemek için birçok farklı özellik sunar. Bu özelliklerden biri de yazı tipleridir. Renkten sonra, yazı tipi muhtemelen bir sayfanın en temel özelliğidir. Yazı tipi, belirli bir stilde ve boyutta yazdırılabilir veya görüntülenebilir metin karakteri...

Web sayfasında, daha çok tasarımı organize etmek için sıklıkla kullandığımız <div> gibi bir blok öğesini merkeze yatay eksende merkeze hizalamak isteyebilirsiniz.Bir blok öğesini yatay olarak ortalamak için “margin: auto” uygulamalısınız. Elemanın genişliğini ayarlamak, kutunun sayfa kenarlarına...

resize Özelliğini, metin alanlarının yeniden boyutlandırılmasını önlemek kullanabilirsiniz. (sağ alt köşedeki “tutucu” yı devre dışı bırakır) textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px...

Bir form öğesinin içinde bir simge istiyorsanız, background-image ve background-position özelliği kullanın. Ayrıca, simgenin alanını ayırmak için padding özelliği ile sol iç boşluğu ayarlamayı ihmal etmeyin. input[type=text] { background-color: white; background-image: url('ara.png')...

border Özelliği kullanarak kenar çizgi stilini belirleyin. Dilerseniz border-radius ile köşelerini yuvarlatabilirsiniz. input[type=text] { border: 2px solid red; border-radius: 4px; } Yalnızca alt kenar çizgisi bazen iyi bir fikir olabilir. border-bottom Özelliği size bunu...

input, select, button ile başlayan çeşitli HTML form elemanlarına sahibiz. Bunlardan bir kısmı kullanıcıdan bilgi almak amaçlı olarak kullanılır. Örneğin text, password, number, email, select gibi kontrolleri sayabiliriz. Web sayfalarınızda oluşturacağınız formları CSS ile biçimlendirebilmek...