CSS şekilleri ile nasıl tasarlanır: bir giriş

Her web sitesinin temeli, sayfayı içeriği olan daha küçük öğelere bölmektir. Tasarımcılar için bu konuda büyük sorun, içeriğin her zaman bir dikdörtgen olmasıdır. Ekranlar şeklinde dikdörtgen şeklindedir ve bunun herhangi bir alt bölümü bir dikdörtgen olacaktır. Bu eğitimde, tasarımın daha ilginç hale getirmek için CSS Clip-Path Path özelliğini ve rotasyonunu kullanarak dikdörtgen şekillerin ötesine nasıl gidileceğini inceleyeceğiz. Tasarımlarınızı daha ilginç hale getirmek için başka yollar için, örneklerimize göz atın. CSS animasyonu . Bütün bu çok fazla iş gibi geliyorsa, bir üst deneyin Web Sitesi Oluşturucu yerine. Ancak sitenizin ihtiyaçları ne olursa olsun, doğru elde etmeniz gerekir. ağ sağlayıcısı senin için.

Başlamak için en kolay şekli bir daire veya ovaldir. Bir dikdörtgen varsa ve tüm kenarlık yarıçapını yüzde 50'den fazla ayarlarsanız, ovaliniz olacaktır ve bir kare ile başlarsanız, tüm taraflar aynı uzunlukta, bir daire alacaksınız. Bu muhtemelen daha önce yaptığınız bir şeydir, ancak genellikle sayfaların tasarımında kullanılmayan bir tekniktir.

• En iyi 20 tel kafes aracı

Daha karmaşık bir çözüm, bir DIV'nin görünür kısmını azaltmak için CSS klipsini kullanarak bir üçgen oluşturmaktır. Bir üçgen oluşturmak için oldukça basit bir şekildir, çünkü sadece üç noktaya sahip olduğundan, ancak daha karmaşık şekiller oluşturmak istiyorsanız, görsel klibi yol düzenleyici gerekli olacaktır.

Bu eğitim, daha benzersiz bir tasarım oluşturmak için, gradyanlar ve dönen dikdörtgenler de dahil olmak üzere tüm bu öğeleri bir araya getirileceğini gösterir. CSS gradyanları ekleyin ve CSS aracılığıyla karmaşık bir geometrik tasarım oluşturulabilir.

• Filesilo'dan öğretici için dosyaları indirin

01. Başlayın

Aç Başlat IDE kod düzenleyicinizdeki klasör ve düzenlemeye başlayın index.html sayfa. Eğitimden başlamak için, Google Yazı Tipleri'ne basit bir bağlantı gerekir, böylece bazı metinler daha sonra dahil edildiğinde, sayfaya eklenen uygun yazılara sahip olabilir.

 & l l l l l l l l l l l l l = "stylesheet" href = "css / shapes.csss" & gt;
link href = "https://fonts.googleapis.com/
CSS? Aile = Arvo: 700 | Lato: 700 "rel =" Stylesheet "& gt; 

02. Şekilleri bir araya getirin

İçinde vücut Sayfadaki etiketi aşağıdaki içeriği ekleyin. şekil içerir DIV etiketi, üretilen tüm farklı şekilleri tutmak için kullanılacaktır ve bu, tarayıcı görünümünü doldurmak için yapılacaktır. Oluşturulacak ilk şekil, diğer görüntüleri bir araya getirecek olan basit bir daire olacaktır.

 & lt; div id = "shape_contain" & gt;
& lt; div id = "daire" & gt; / div & gt;
& lt; / div & gt; 

03. Sayfayı Yapın

Şimdi geç Css klasör ve aç shapes.csss dosya. Vücut ve HTML, tarayıcıyı, işinin sonuna doğru eklenecek olan metnin çoğunluğu için, son dokunuşlar olarak eklenecek olan metnin çoğunluğu için ayarlanmıştır.

 vücut,
html {
Marj: 0;
Dolgu: 0;
Genişlik:% 100;
Yükseklik: 100vh;
taşma-x: gizlenmiş;
Yazı Tipi ailesi: 'Lato', Sans-Serif;
Metin dönüşümü: büyük harf;
} 

04. Şekilleri içerir

Bir sonraki CSS kuralı, kimliği ile DIV içindir. shape_contain . Bu, tarayıcıyı gizlenmiş herhangi bir taşma ile dolduracak şekilde ayarlanmıştır. translate3d İçeriğin donanımın hızlandırılmasını sağlamaktır. İki arka plan görüntüsünden önce büyük bir sınır eklenir. Biri normal bir görüntüdür, yukarıdakiler aqua renkli, yarı saydam bir gradyandır.

 #shape_contain {
Kutu boyutlandırma: sınır kutusu;
Genişlik:% 100;
Yükseklik: 100vh;
Taşma: Gizli;
Dönüştür: Translate3D (0, 0, 0);
Sınır: 20px katı RGB (255, 254, 244);
Arka plan: Doğrusal gradyan (0deg, RGBA (7,
47, 46, 0.8) 0%, RGBA (255, 252, 226, 0.5)
% 100), URL (../ Resimler / Mountain.jpg)
tekrarlayan merkez merkezi;
Arka plan boyutu: Kapak;
} 

05. Bir daire ile başlayın

Oluşturulacak ilk geometrik şekil en basit şekillerden biridir. Herhangi bir kare şeklindeki bir daire yapılabilir div Sınır yarıçapı ekleyerek % 50 . Daire yarı saydamdır, bunun kenarına yumuşak bir gölge eklenir.

 #circle {
Genişlik: 80vh;
Yükseklik: 80vh;
Sınır yarıçapı:% 50;
Arka plan: RGBA (136, 239, 231, 0.3);
Konum: Mutlak;
Üst: 7vh;
Sol:% 50;
Dönüştür: Translate3D (-50, 0, 0);
Kutu gölgesi: 0px 5px 40px RGBA (0, 0, 0, 0.3);
} 

06. bir üçgen deneyin

Bir sonraki şekil biraz daha karmaşık olacak çünkü bir üçgendir. Bir çokgen şeklinin oluşturulmasını sağlayan CSS klipsini kullanarak oluşturmak nispeten basit. Bu div ekleyin shape_contain div.

 & lt; div id = "tri1" & gt; 

07. Üçgeni uygulayın

Burada klip-yol CSS'nin üçgeni yapması için oluşturulur. Şekil sadece üç puandır. Arka plan görüntüsü eklenir ve buraya bir filtre, bu tonu hafifçe kaydırılabilir, bu da görüntünün kontrastla vurgulanan hafif bir pembe renk tonunu üstlenmesini sağlar.

 # tri1 {
klip-yol: çokgen (0 0, 100% 0, 50%
100%);
Genişlik: 100vh;
Yükseklik: 88vh;
Arka plan: URL (../ Resimler / girl3.jpg)
tekrarlayan merkez merkezi;
Arka plan boyutu: Kapak;
Konum: Mutlak;
Üst: 10vh;
Sol:% 50;
Dönüştür: Translate3D (-50, 0, 0);
Filtre: Hue-rotate (310deg) kontrast (% 140);
Opaklık: 0,8;
} 

08. Daha karmaşık gidin

Oluşturulacak bir sonraki şekil, ortada bir delikli bir üçgen olacaktır. Bu nispeten basit geliyor, ancak klip çokgenin sürekli bir çizgi olması gerekiyor, bu yüzden oluşturmak için daha karmaşık. Benzer bir şekil oluşturmanız gerekirse, kullanın Bennett Feely'nin klibi yolu yapımcısı şekli oluşturmak için.

 & lt; div id = "tri2" & gt; 

09. Şekilleri istifleyin

Buradaki şekil daha karmaşık çünkü daha önce belirtilen linkte görsel olarak oluşturuldu. Bulutlar görüntüsü şekle yerleştirilir ve ardından bu, bunu biraz daha sarı hale getirmek için ayarlanır. Her şekil kesinlikle, çevresindeki DIV'nin ortasına yerleştirilir ve birinin üstüne yığılmıştır.

 # tri2 {
Klip-yol: çokgen (% 50 0, 0% 100%,% 9% 100,
% 50% 17,% 50% 17,% 85% 91,% 13% 91, 0% 100,
% 100% 100,% 50 0);
Genişlik: 80vh;
Yükseklik: 70vh;
Arka plan: URL (../ Resimler / clouds.jpg)
tekrarlayan merkez merkezi;
Arka plan boyutu: Kapak;
Konum: Mutlak;
Üst: 1vh;
Sol:% 50;
Dönüştür: Translate3D (-50, 0, 0);
Filtre: Hue-rotate (90deg) kontrast (% 140);
Opaklık: 0.7;} 

10. Tarayıcıyı yeniden boyutlandırmayı deneyin

Bir sonraki üçgen eklenmeli shape_contain div. Tarayıcıyı kontrol ederseniz, tarayıcıyı yeniden boyutlandırabileceğinizi ve şekillerin yüzdelerine dayandığı için mükemmel şekilde yeniden boyutlandırılacağını göreceksiniz. Konteyner, viewport yüksekliği ile ayarlanır, böylece her zaman ekrana sığacaktır.

 & lt; div id = "tri3" & gt; 

11. stil yukarı

Son üçgen, merkezdeki delik olan bir öncekiyle aynı şekli kullanır. Bu sefer bir görüntüden ziyade sadece bir turkuaz gölgesine sahiptir. Şeffaflık, bu üçgeni aşağıdaki diğer içeriğe görebilmek için düşük ayarlanmıştır.

 # tri3 {
Klip-yol: çokgen (% 50 0, 0% 100%,% 9% 100,
% 50% 17,% 50% 17,% 85% 91,% 13% 91, 0% 100,
% 100% 100,% 50 0);
Genişlik: 80vh;
Yükseklik: 70vh;
Arka plan: RGBA (0, 113, 110, 0.2);
Konum: Mutlak;
Üst: 20vh;
Sol:% 50;
Dönüştür: Translate3D (-50, 0, 0);
} 

12. Açılı bir şerit oluşturun

Bir sonraki şekil açılı bir div şeklidir. Bu, üçgen arasında bir ve iki arasında yerleştirilecektir. shape_contain div etiketi. Ekran boyunca yarı saydam bir gradyan kullanarak sayfaya karıştırın. Bunlar ayrıca farklı boyutlu ekranlara yukarı ve aşağı ölçeklenir.

& lt; div id = "strip1" sınıfı = "şerit" & gt; 

13. Açıları yapın

şerit Sınıf arka plan gradyanını ayarlar. Bu, çevrimiçi degrade editörü kullanılarak yapılır. CSS gradyani . Kimliğe daha sonra bu özel açılı gradyan şeklinin konumunu ayarlar. Merkeze yerleştirilir ve daha sonra farklı monitörlere tutarlı bir yerleşimi koruyacak şekilde hafifçe dengelenir.

 .strip {
Konum: Mutlak;
Arka plan: Doğrusal gradyan (0deg, RGBA (164,
0, 217, 0) 0%, RGBA (164, 0, 217, 0.3)% 35,
RGBA (255, 67, 134, 0.3)% 65, RGBA (255, 67,
134, 0)% 100);
}
# stripl1 {
Genişlik: 20vh;
Yükseklik: 120vh;
Sol:% 50;
Dönüştür: Translate3D (-175%, -15, 0)
Rotatez (30deg);
} 

14. Daha fazla degrade açıları deneyin

Sınıfını tutan iki DIV etiketi şimdi eklendi şerit . Kimlik, ekranda farklı pozisyonlara yerleştirilmelerini sağlayacaktır. Bunlar, sahnenin genel estetiğini oluşturan tekrarlayan şekiller olarak kullanılırken, ayrıca bir renk sıçrama ekler.

 & lt; div id = "strip2" sınıfı = "şerit" & gt; / div & gt;
& lt; div id = "strip3" sınıf = "şerit" & gt; 

15. Açıyı yerleştirin

İki şerit açısı degrade şekilleri, ekrandaki ana içeriğin her iki tarafına yerleştirilir. Biri sol alt sola doğru, diğerine sağ üst köşeye doğru yerleştirilir, böylece ekranı dengeler. Bu elemanların ekranda yerinde durun ve sığacak şekilde ölçeklendirilmesi için tarayıcıyı yeniden boyutlandırın.

 # strip2 {
Genişlik: 5vh;
Yükseklik: 90vh;
Sol:% 50;
Dönüştür: Translate3D (60vh, -15, 0)
Rotatez (30deg);
}
# strip3 {
Genişlik: 5vh;
Yükseklik: 90vh;
Sol:% 50;
Dönüştür: Translate3D (-70vh,% 25, ​​0)
Rotatez (30deg);
} 

16. Bazı metin içeriği ekleyin

Bu sayfada çok fazla miktarda metin içeriğine sahip değil, ancak burada DivS, tüm kalan sayfa içeriğinin ekrana yerleştirilmesini sağlar. DivS, CLOTING DIV etiketinden önce eklenmelidir. shape_contain panel. Bu metin elemanları farklı köşelere bölünecektir.

 & lt; div id = "leftside" & gt; dikdörtgenin ötesine geç
& lt; / div & gt;
& lt; div id = "doğru" & gt; duyarlı şekil
Düzenler; / div & gt;
& lt; div id = "toplfled" & gt; web tasarımcıları
& lt; BR & GT; CSS Toolkit & LT; / Div & GT;
& lt; div id = "toplama" ve gt; 2019 & lt; / div & gt;
& lt; div id = "başlık" & gt; CSS şekilleri & lt; / div & gt; 

17. Metni döndürün

Sol taraf DIV, ekranın sol tarafında kesinlikle yerleştirilmiştir ve tarafın aşağısına uyması için 90 derece döndürülür. Dönüştürme kaynağı, metnin ekranın kenarına yaklaştırmak için hafifçe hareket ettirilir.

 #leftside {
Konum: Mutlak;
Sol: 20px;
Üst:% 70;
Dönüşüm kökenli:% 10% 0;
dönüşüm: döndürme (-90deg);
} 

18. Sağ metni yerleştirin

Sağ metin, ekranın sağ tarafından konumlandırılmış dışında sol metneye çok benzer. Dönme saat yönünün tersine çevrilmelidir, böylece metin daha iyi oturur ve ekranın sağında daha kolay okunur.

 #Rightside {
Konum: Mutlak;
Sağ: 20px;
Üst:% 70;
Dönüşüm kökenli:% 90% 0;
dönüşüm: döndürme (90deg);
} 

19. metni stilize etmek

Şimdi sol üst köşedeki metin stilize edilir. İlk iki kelime varsayılan boyutlarında kalırken, kalan kelimeler metne bir hiyerarşi sağlamak için bir sonraki satırda bir sonraki satırda büyütülür ve konumlandırılır. Bu, herhangi bir yeniden boyutlandırma ile sol üst köşeye yapışacaktır.

 #topleft {
Konum: Mutlak;
Sol: 40px;
Üst: 40px;
Genişlik: 180px;
Metin Hizası: Merkez;
}
#topleft span {
Yazı tipi boyutu: 1.8EM;
} 

20. Sağ metni ayarlayın

Sağ üst köşenin metni şimdi ayarlandı. Bu, siyah bir yuvarlak dairenin içinde, metni daireye karşı beyaz olarak ayarlanır. Bu, DIV yüksekliği ile aynı olan satır yüksekliğini kullanarak, merkezdeki metni hizalamak için Hat Yüksekliği yöntemini kullanır.

 #TOPRIGHT {
Konum: Mutlak;
Sağ: 35px;
Üst: 25px;
Hat yüksekliği: 100px;
Yazı tipi boyutu: 1.4EM;
Genişlik: 100px;
Yükseklik: 100px;
Arka plan: # 000;
Renk: #FFF;
Metin Hizası: Merkez;
Sınır yarıçapı:% 50;
} 

21. Başlık metnini ayarlayın

Ayarlanacak son metin, ekranın ortasındaki ana başlıktır. Yazma işlemi bunun için değiştirildi ve bu sayfa tasarımının vurgu rengiyle karıştırılması için açık pembe yarı saydam bir renk verilir. Sayfayı kaydedin ve bitmiş sonucu görmek için tarayıcınızı yenileyin. Sayfanın bir kopyasını kaydetmek veya paylaşmak ister misiniz? Bir pdf olarak dışa aktarın ve kaydedin Bulut depolama .

 #headline {
Konum: Mutlak;
Genişlik:% 100;
Z-index: 200;
Dolgu-top: 65vh;
Yazı Tipi-Ailesi: 'Arvo', Serif;
Metin Hizası: Merkez;
Renk: RGBA (233, 173, 255, 0.8);
Yazı Tipi Boyutu: 8VW;
Metin gölge: 0px 3px 50px RGBA (0, 0, 0, 0,5);
} 

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Sayı satın al 284 veya abone ol .

Daha fazla oku:

• CSS Sanatı ile başlayın
• 5 Cool CSS Izgara Jeneratörleri
• CSS Metodolojilerine Bir Web Tasarımcısı Kılavuzu