• Wpisów: 49
  • Średnio co: 45 dni
  • Ostatni wpis: 4 lata temu, 22:47
  • Licznik odwiedzin: 14 315 / 2269 dni
 
csslab
 
Kod CSS, który znajduje się na końcu tego wpisu, odpowiedzialny jest za wprowadzenie białego tła o nieprzezroczystości 60% w głównym elemencie przechowującym wpisy oraz w elemencie do edycji tekstów. Efekt działania kodu można zobaczyć pod adresem: 'blog110801.pinger.pl/'.
Pokrótce objaśnię poszczególne fragmenty kodu.

Na początku reguła ustalająca właściwości tła wyżej wymienionych elementów:

'background-color: transparent' – przezroczyste tło, aby można było zastosować filtr 'gradient' w IE8,
'background-color: rgba(255,255,255,0.6)' – nadpisuje poprzednią deklarację zmieniając tło na białe, półprzezroczyste. ( przeglądarka musi rozpoznawać zapis RGBA, inaczej tło pozostanie z wartością 'transparent' ),
'-ms-filter: "progid...' – białe, półprzezroczyste tło uzyskane za pomocą filtra (przeglądarka IE8).

Kolejna reguła działa na tych samych elementach, lecz jest pomijana przez IE8 ze względu na zastosowanie niezrozumiałej przez nią pseudo-klasy ':root'. Zawiera jedną deklarację:

'-ms-filter: "none"' – wyłącza poprzednio wprowadzonego filtra (dla IE9).

Następny fragment kodu dotyczy elementów ozdobnych nadających głównym obiektom zaokrąglone narożniki. Zawiera:

'opacity: 0.6' – wprowadza półprzezroczystość dla zachowania zgodności z elementami głównymi,
'-ms-filter: "progid...' – podobnie jak wyżej, tylko że korzystamy z filtra 'alpha' z myślą o IE8.

Dalsze dwie reguły obierają sobie za cel małe etykiety kart, które umożliwiają przełączanie się między wpisami a archiwum. Reguły mają podobne działanie jak te dwie na początku kodu, czyli ustalają stopień przezroczystości. W pierwszej z nich występuje dodatkowa deklaracja wyłączającą obrazek z gradientem. Dla osiągnięcia celu, należy jeszcze ustalić przezroczyste tło w pewnych elementach wewnętrznych tych etykiet, co wykonuje blok kodu zaraz pod wymienionymi regułami.

Ostatnie dwie reguły pełnią raczej funkcje kosmetyczne, gdzie wyłączają pewne elementy, które psułby cały efekt.

A oto kod CSS w całości:

Uwaga: usunąć spacje we fragmentach kodu: 'progid: DXImageTransform'

div#main_news, div#news {
background-color: transparent;
background-color: rgba(255,255,255,0.6);
-ms-filter: "progid: DXImageTransform.Microsoft.Gradient( StartColorStr='#99FFFFFF', EndColorStr='#99FFFFFF' )"
}
:root div#main_news, div#news {
-ms-filter: "none"
}
.radius-main-top, .radius-main-bottom, .half-radius-main-bottom {
opacity: 0.6;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"
}
ul.user-profile li, ul.my-profile li {
background-image: none;
background-color: transparent;
background-color: rgba(255,255,255,0.6);
-ms-filter: "progid: DXImageTransform.Microsoft.Gradient( StartColorStr='#99FFFFFF', EndColorStr='#99FFFFFF' )"
}
:root ul.user-profile li, ul.my-profile li{
-ms-filter: "none"
}
ul.user-profile li a.current, ul.my-profile li a.current {
background-color: transparent
}
div#left_content .news_content, .last-profile-entry{
background-image: none;
}
.author-odd, .author-even, .authors-odd, .authors-even {
border-style: none
}

Wpisy na temat półprzezroczystości na stronie:
'csslab.pinger.pl/(…)polprzezroczystosc-na-stronie-t…'
'csslab.pinger.pl/(…)polprzezroczystosc-w-internet-e…'

Nie możesz dodać komentarza.
Tylko zalogowani użytkownicy mogą komentować ten wpis.

  Wyświetlanie: od najstarszego | od najnowszego