poniedziałek, 18 stycznia 2016

Separatory

Nijak nie mogę znaleźć tej opcji znaleźć przy zwykłej edycji posta, umiem to dodać tylko z użyciem HTML. Przyszło mi do głowy, że pewnie niektórzy przez to nawet o danej opcji nie wiedzą. A taki ozdobnik może być nawet ciekawy, więc pomyślałam, że może o tym napiszę. W końcu dzielnik może zaznaczyć np. przypisy albo zmianę narracji w opowiadaniu. Ale ja tu gadu-gadu, a wciąż nie napisałam, jak wstawić kreskę.

Wystarczy w kod wpisać:
<hr />
Selektor, jak łatwo się domyślić, to hr. Kilka przykładowych separatorów:



To teraz kod css.
hr.jeden {background-color: red; color: red; height: 4px; border: none}
hr.dwa { border: 0; height: 1px; color: #333; background: #333; background-image: linear-gradient(to right, ghostwhite, #333, ghostwhite)}
hr.trzy {border: 0; border-bottom: 3px dashed lightskyblue; background: midnightblue; color: midnightblue}
W zależności od przeglądarki kolor linii to background-color: lub color:, zatem najlepiej powtarzać te wartości. W linii pierwszej ustawiłam tylko kolor czerwony, wysokość i brak obramowania. W drugim dodałam gradient, który na jasnym tle spowodowałby rozmycie się naszego separatora. Zaś trójka ma obramowanie, ale tylko z dołu, reszta obramowania usunięta. Obramowanie jest błękitne, ale wolne miejsce między kreskami wypełnia kolor granatowy, czyli tło.

Brak komentarzy:

Prześlij komentarz