Prosty i skuteczny trick, który pozwoli nam na automatyczne dodawanie ramki do zdjęcia za pomocą stylów CSS - bez użycia programów graficznych. Działa bez problemów pod IE 7.0 (6 < nie testowane, bo kogo wcześniejsze wersje obchodzą (?))
Zmodyfikowany kod który można umieścić w arkuszu stylów:
Kod:
img {
padding: 5px;
background: #FFFFFF;
border: 1px solid #36393D;
}
1. Definiujemy styl dla znacznika <img />, od teraz każde zdjęcie będzie w ramce, w przeciwnym wypadku jeżeli tego nie chcemy możemy zdefiniować klasę np. ".ramka"
2. Ustawiamy wielkość ramki (padding)
3. Wpisujemy kolor tła ramki (background, w tym wypadku biały)
4. Opcjonalnie, dla lepszego efektu możemy dodać malutką, jednopikselową ramkę (border)
4.1. Atrybut solid - oznacza rodzaj ramki, w typ wypadku linia ciągła (istnieją jeszcze inne rodzaje, np. kropkowana (dotted))
4.2. #36393D, zapis oznaczający kolor ramki (można stosować również w skróconej formie np. #000 lub słownej np. black, red, white itp.)
Efekt można zobaczyć tutaj:
devid.jogger.pl
Zaloguj
Zarejestruj
FAQ
Szukaj
