Ben “Dünya” i ve ben otantikim, bu yüzden onu bir dünyanın resmiyle örtmeyi düşünüyorum. .
Arka plan: URL (…/IMG/Earth.jpg) Merkez Merkezi Tekrarsız;
Arka plan boyutu: kapak;
Arka plan boyutu:%18;
Renk: #ff;
Metnin hizalanması: orta;
2em yatak;
-Webkit-Text-Fill-Renk: Şeffaf;
-Webkit-Background-Klip: metin;
} Burada istenen etkiyi elde etmek için iki etiket kullanıyoruz.
-Webkit-Tex-First-Warry: Transparen;
-Webkit-Background-Klip: metin; Aslında maskelenmiş bir tip efekti yaratan şey budur. W3C spesifikasyonları veya tüm web tarayıcıları tarafından resmi olarak uygulanmayan, ancak WebKit tarayıcılar için kullanılabilir CSS özellikleri için kullanılır. Dikkat edilmesi gereken bir şey: İki arka plan boyutu etiketine sahip olmanıza gerek yok, ancak size boyutu “kapak” olarak ayarlama seçeneğiniz olduğunu göstermek istiyorum. Bu özel durumda görüntüleri manuel olarak ölçmek istiyorum. İki seçenek iyi. Ve Waalaa!
Grafik tipografi yeterli tipografi alamıyor mu? Duygularını anlıyorum. Tipografi, web tasarım topluluğunda giderek daha popüler görünüyor. Tasarımcılar daha çok içeriğe odaklanır ve web sitelerinde onları vurgulamanın yollarını keşfeder. Bu nedenle, türün iletişim dışında bir grafik öğesi olarak göründüğü görülmektedir. Bu nedenle, çeşitli türlere nasıl bir grafik dokunuşu ekleyeceğinize bakalım. Başlamak için HTML’miz var. Bu bir kez daha bir HTML modülüne veya hatta metin için özel bir widget modülüne yerleştirilebilir.

Grafik

Oldukça temel. İlgi ekleme zamanı. CSS:.

Renk: #555;
Yazı tipi ailesi: ‘Oswald’, sans-serif;
Metin dekorasyonu: yok;
Metin dönüşümü: büyük harf;
Yazı tipi boyutu: 200px;
Font-Heavy: 800;
Mektup alanı: -3px;
Hat yüksekliği: 1;
Text-Shadow: #eded 3px 2px 0;
Pozisyon: göreceli;
}
Şimdi sahte öğeyi ekliyoruz :: sonra. H2’nin pozisyonuna dikkat edin göreceli, sözde elementlerimizi mutlak bir şekilde konumlandırdığımızda gereklidir. Ayrıca başlığımıza metnin küçük bir gölgesini de ekledik, ancak şu anda çok görünür değil. .Kontainer H2: sonra {content: “grafik”;

Pozisyon: Mutlak;
Sol: 10 piksel;
Yukarıda: 10 piksel;
Arka plan-görüntü: -Webkit-linear-gradyan (sol üst, şeffaf%0,
şeffaf%25, #555%25, #555 50, şeffaf%50,
şeffaf%75, #555%75);
Arka plan boyutu: 4px 4px;
-Webkit-Background-Klip: metin;
-Webkit-Tex-First-Warry: Transparen;
Dizin -z: -5;
Ekran bloğu;
Metin: Hayır;
Metnin hizalanması: orta;
} Şimdi buna sahibiz. Çok daha ilginç bir başlık.
Metnin metni başlığı sahte öğeden çıkarır ve bazı CSS etiketleri için önek webkitini bir kez daha kullanırız. Yapabileceğiniz başlık türünü görmek için farklı yazı tipleri ve renklerle oynamak. CSS ile Üçgen Yapmak Belki bir partiye geç kalıyorum ve herkes bunu biliyor, ancak fakir bir ruh olması ve benim gibi bir şey bilmemesi durumunda paylaşmak zorundayım. Sık sık kendimi çeşitli nedenlerle okları (üçgenler) kullanmak istiyorum. Bu durumda her zaman illüstratörde bir üçgen yapacağım ve CSS’imde bir arka plan görüntüsü olarak kullanacağım.
Daha iyi bir yol var. Bir meydanımız var.

Genişlik: 200px; Yükseklik: 200px; Sınır sol: katı 20px #f00; Sınır-sağ: katı 20px #ff0; Sınır üstü: katı 20px #0F0; Sınır dip: Katı 20px #00F;
Bir köşedeki sınır toplantısına dikkat edin. Şimdi karenin genişliğini ve yüksekliğini sıfıra ayarlayın.

Genişlik: 0px; Yükseklik: 0px; Arka plan: şeffaf; Şimdi dört farklı üçgeniniz var ve tek yapmanız gereken üçgenin istenen yönünü seçmek ve diğer sınır renklerini şeffaf olacak şekilde ayarlamaktır. Sınır sol: katı 20px şeffaf; Sınır-sağ: katı 20px şeffaf; Sınır üstü: katı 20px şeffaf; Sınır dip: Katı 20px #00F;

Patlama. Üçgen. .Triangle {

Genişlik: 0;

Yükseklik: 0;
Arka plan: şeffaf;
Sınır sol: katı 20px şeffaf;
Sınır-sağ: katı 20px şeffaf;
Sınır üstü: katı 20px şeffaf;
Sınır dip: Katı 20px #00F;
} Fotoğrafları “kutunun dışına” çözmek, herhangi bir web sitesine iyi bir ektir. Görseller ekleyerek, mesajınıza biraz ekstra ruh veren ikinci iletişim katmanı eklenir. Çoğu dikdörtgen fotoğraf. Fotoğrafın şeklini değiştirmek için kliplerin nasıl kullanılacağını göreceğiz. Bu fotoğrafı bir altıgen haline getirelim.
Fotoğraf meydanıma dikkat et. Sağlanan çokgen noktasını kullanırsanız, altıgeninizi eğmemek için kare bir fotoğraf kullanmak istersiniz.
Html:

Şimdi CSS: .CLIP-SVG {
Genişlik: 0;
Yükseklik: 0;
}
resim {
Maksimum genişlik:%100;
Yükseklik: otomatik;
}
.Poligon-Klip-segi Six {
-Webkit-Clip-Path: Polygon (% 50% 0,% 100% 25,% 100% 75,% 50% 100,% 0% 75,% 0% 25);
Klip-yol: poligon (% 50% 0,% 100% 25,% 100% 75,% 50% 100,% 0% 75,
% 0% 25);
-Webkit-Clip-Path: URL (“#polygon-clip-hexagon”);
Clip-Path: URL (“#Polygon-Clip-hexagon”);
} Clip-Path özelliği CSS, farklı değerleri değiştirerek farklı bir şey oluşturmanıza olanak tanır. Altıncı, Sekiz, Yıldızlar – Kutunun dışında düşünmek.
Patlama. Altıgen.
Kendinize çeşitli formlar için nasıl farklı değerler üreteceğinizi sorabilirsiniz ve Clippy size yardımcı oldu. Yine de isterseniz her şeyi manuel olarak yönetebilirsiniz. Clip-Path özelliği CSS ödeme hilesinin ayrıntılı bir açıklaması için. Hatırlatma: Çünkü CSS’nin hayatımda çok fazla heyecan getirdiğini söylemekten utanmamanız gerektiği anlamına gelemezsiniz. Yapabileceği her şeyi bulmak Game of Thrones – Scratch’ın sonundan daha iyi. Hadi delirmeyelim. Yine de, bilgelik animasyon gibi daha karmaşık CSS ile kullanmak gerekir. Neyin önemli olduğunu taşımak ve unutmak kolaydır – net ve kullanıcı dostu içerik sunmaya odaklanan cilalı web siteleri oluşturmak.
Unutmayın, yapabileceğiniz için, bunu yapmanız gerektiği anlamına gelmez. Bazı CSS animasyonları sadece siteye kaos eklerse ve mesaj için hiçbir şey yapmazsa, kullanmayın. Hız ve hızda dikkatlice hareket edin. Kullanıcıların çoğunun “özel efektler” üzerinden hızı tercih ettiğini garanti ediyorum.
Saylor Bullington
Saylor bir blog yazısı yazdı ve Ithemes için çeşitli projeler tasarladı/geliştirdi.Saylor bahçeciliği seviyor ve şu anda tüm sincaplarla savaşıyor (eğer sincaplardan nasıl kurtulacağına dair ipuçları varsa, dinleyecek).Eğer OKC’de seyahat etmez veya takılmazsa, Oklahoma’nın güneybatısında bir çatı yapmak da dahil olmak üzere sert bir iş yapma veya babasının ona “Bina Karakter” dediği gibi bir olasılık var.

CSS WordPress hileleri: CSS Tipografi MaskesiKlip Yolu & amp;Başka