Grzegorz Dziubiński

Całkiem dość dawno zauważyłem przy odnośnikach malutkie ikonki. Jednak dopiero dziś zastanowiło mnie jak coś takiego uczynić. Oszukałem się w sumie trochę… i zasięgnąć musiałem troche nowej literatury.

Na początek…


<a href="#moja_muzyka.mp3“>utwór.mp3</a>


Aby mile zaacentować obecność URLa który bezpośrednio prowadzi do dźwięku mp3 tworzymy regułę css, która sprawdza czy nasz URL kończy się z rozszerzeniem .mp3.

a[href$='.mp3']{
background: url('winamp_icon.gif') no-repeat center right;
padding-right: 16px;
}

A zapytacie pewnie jak zaznaczyć ze wpisany adres jest mailem… Tutaj posłużę się inną regułą, która sprawdzi czy nasz adres URL rozpoczyna się od mailto:

<a href="mailto:adres@mailowy.pl”>adres</a>


a[href^='mailto:']{
background: url('email.gif') no-repeat center right;
padding-right: 16px;
}

Tak oto możemy tworzyć samemu mnóstwo reguł do plików *.exe, *.doc czy też *.xls których celem jest uczynienie naszej strony przyjaźniejszą!

Efekt końcowy można zobaczyć »tutaj«

Ostatnio zastanawiałem się w jaki sposób zainteresować internaute oryginalnzm, prostym wyglądem obramowania. Postanowiłem wtedy zrobić mały eksperyment. Ująłem tekst w 2 nakładające się DIV-y:

<div id="warstwa_1">
<div id="warstwa_2"> Lorem ipsum dolor sit amet </div>
</div>


Nic zaskakującego w powyższym kodzie nie widać. Ale jakże piękny efekt daje on z połączeniem dokumentu CSS-a:

div#warstwa_1 {
position: relative;
z-index: 10;
border: 5px solid red; //czerwone-ciągłe obramowanie
width: 100px;
height: 100px;
}
div#warstwa_2 {
position: relative;
z-index: 20;
border: 2px dashed black; //czarne-przerywanie obramowanie
width: 100px;
height: 100px;
margin: -5px; //przesuniecie w lewo (efekt cienia)
}

Czytaj dalej »

Dodając róznego rodzaju ikony na jakąkolwiek stronę z pewnością natrafiłeś na sytuacje kiedy ikona nie miała prostego kształtu (prostokąt, kwadrat), a jej układ przypominał całkowicie “niestworzoną” figurę.Jak ją ustawić, zapisać, aby poźniej nie zważając na jej położenie ładnie dopasowywała sie do tła i tworzyła z nim efekt “jedości”?

Oto dla tych którzy nie wiedzą, badź nie zdają sobie sprawy jakie to łatwe i przyjazne małe wskazówki:

• Wybrany przez nas obrazek pozbawiamy grafiki, której nie chcemy żeby była wyświetlana.

do usuwamy całkowicie tło

Czytaj dalej »

Kiedy webmasterzy męczą się, aby podążyć za standardami CSSa, całkowicie nie zważyli na to, że ich wzór, ideał Validator udziela nam lekcji na temat kaskadowych arkuszy stylów, kiedy to on sam powinien nad nimi popracować.
Oto prosty przykład:

• Machiną którą to  validator sprawdza nas- koderów… ja sprawdziłem jego!

• zobacz

Rezultat jest niezmiernie zaskakujący .

Dość często kiedy edytujemy jakikolwiek obrazek nadajemy mu efekt przezroczystości. Przy tworzeniu stron www może to nie być, aż tak komfortowe kiedy grafika naszej strony ładuje się dość długo.

Aby ograniczyć ten czas proponuje zastosowanie funkcji opacity Jest to bardzo przyjazny element CSS-a. Który pozwoli zaoszczędzić nawet wielką ilość miejsca na naszym serwerze. Oto kod, który pomoże nam w tym:


.efekt img {                 //efekt przed najechaniem myszy
border: 1px solid #000000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.efekt:hover img {           //efekt po najechaniu myszy
border: 1px solid #000000;
filter: alpha(opacity=100);
-moz-opacity: 100;
-khtml-opacity: 100;
opacity: 100;
} 

przykład

Teraz pozostało odwołaąć sie do naszej klasy efekt w dokumencie *.html.

Podkreślam jednak, że tego typu filtry graficzne nie są zgodne ze standardami CSSa.