Diyelim ki bir elemanı hedeflemek ve sınırını görsel olarak bulanıklaştırmak istiyoruz. Ulaşabileceğimiz basit, tek bir yerleşik web platformu özelliği yoktur. Fakat bunu küçük bir CSS hilesiyle yapabiliriz.
İşte peşinde olduğumuz şey:
Bakalım bu etkiyi nasıl kodlayabildiğimizi, köşeleri yuvarlatılmış olarak nasıl geliştirebileceğimizi, desteğimizi artıracağımızı, böylece çapraz tarayıcıyı çalıştıracağını, geleceğin bu bölümde neler getireceğini ve aynı fikirden başlayabileceğimiz diğer ilginç sonuçları bulabileceğimizi görelim!
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TasarimKodlama.COM</title> <style> @charset "UTF-8"; div { position: relative; border: solid 1.5em rgba(0, 0, 0, 0.03); height: 50vmin; max-width: 13em; max-height: 7em; background: url(bayrak.jpg) 50%/cover border-box padding-box; font-size: 2em; } div:before { position: absolute; z-index: -1; top: -1.5em; right: -1.5em; bottom: -1.5em; left: -1.5em; border: inherit; border-color: transparent; background: inherit; background-clip: border-box; -webkit-filter: blur(9px); filter: blur(9px); content: ""; } </style> </head> <body> <div></div> </body> </html> |
Kaynak: css-tricks.com/blurred-borders-in-css/
Yorum Yap