Jak zastąpić obrazek kodem CSS?

Czas czytania: 3 minut

W tym artykule pokażę wam jak w bardzo prosty sposób zastąpić grafikę, obrazek kodem CSS. Większość efektów jakie poniżej zobaczycie stała się możliwa wraz z rozwojem CSS. A tym samym ułatwiło życie wielu osobą budującym strony internetowe.

Jak zapewne wiecie obecnie jednym z czynników wpływających na naszą stronę (np. jej odbiór przez odwiedzających, opinie Google) jest szybkość ładowania. Obrazy tego zadania nie ułatwiają – chociaż by ze względu na swoją wagę. Dlatego zastąpienie go kodem CSS może dość mocno odciążyć stronę.

Zastępujemy grafikę, obrazek kodem CSS?

Poniżej pokażę wam kilka zastosowań kodu CSS, w miejscu gdzie zazwyczaj oczekiwalibyśmy grafiki.

Cytat blokowy

Na bardzo wielu stronach internetowych cytaty blokowe ozdobione są znaczkami cudzysłowu mieszczącymi się w dwóch skrajnych rogach. W większości przypadków uzyskiwane są poprzez umieszczenie dwóch obrazków przedstawiających cudzysłowie jako tło. Podobny efekt możemy uzyskać bez pomocy grafik.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, blanditiis, culpa provident ipsa vel voluptates porro enim eveniet asperiores. Illo!

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, blanditiis, culpa provident ipsa vel voluptates porro enim eveniet asperiores. Illo!</p>
</blockquote>

Kod CSS dla powyższego przykładu:

blockquote {
    font-size: 13px;
    position: relative;
    color: #46494f;
    line-height: 1.54em;
    font-style: italic;
    padding: 0 70px;
    text-align: justify;
}

blockquote::before {
    font-family: Helvetica, serif;
    content: '„';
    font-size: 100px;
    color: #196abc;
    position: absolute;
    left: 0;
    bottom: 20px;
}

blockquote::after {
    font-family: Helvetica, serif;
    content: '”';
    font-size: 100px;
    color: #196abc;
    position: absolute;
    right: 0;
    top: 10px;
}

Powyższy efekt opiera się o pseudo elementy, którymi są znaczniki ::after i ::before to w nich zostały umieszczone cudzysłowie.

W przykładzie została użyta czcionka „Helvetica” może być ona zastąpiona jednak dowolną inną w zależności od potrzeby. Warto przy tym pamiętać, że niektóre czcionki musimy przedtem zainstalować w naszej witrynie.

By lepiej zrozumieć przeczytaj -> Pseudo elementy ::after i ::before

Dymek z komentarzem

Jednym z popularnych sposobów ozdabiania komentarzy jest tworzenie „dymków” z trójkątnym rogiem wskazującym autora.

<div class="comment">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, blanditiis, culpa provident ipsa vel voluptates porro enim eveniet asperiores. Illo!</p>
</div>

W CSS

.comment {
    border: 1px solid #d8dee5;
    margin-bottom: 40px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    font-size: 13px;
    position: relative;
    color: #46494f;
    line-height: 1.54em;
    margin-left: 120px;
}

.comment::before {
    content: ' ';
    display: block;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    height: 17px;
    width: 17px;
    background-color: #fff;
    border-top: 1px solid #d8dee5;
    border-left: 1px solid #d8dee5;
    position: absolute;
    left: -10px;
    top: -1px;
    -ms-transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);
    z-index: 1;
}

.comment p {
    padding: 8px 12px;
    position: relative;
    background-color: #fff;
    z-index: 2;
}

Powyższe skrypty powinny działać wszędzie z wyjątkiem Internet Explorer w wersji starszej niż 9.

Dodawanie kratki w tle

Teraz pokażę jak zrobić tło rodem z zeszytu w kratkę:

W powyższym przykładzie całe tło jest kratowane. Spokojnie jednak można użyć efektu na jakimś obiekcie lub całej sekcji.

Sam efekt jest banalnie prosty wystarczy bowiem odpowiednio użyć efektu gradientu na tle.

  background: #73BCF7;
  background-image: linear-gradient(rgba(100 100 100) .1em, transparent .1em), linear-gradient(90deg, rgba(100 100 100) .1em, transparent .1em);
  background-size: 1em 1em;
  font-size:18px;

warto przeczytać – Jak ustawić tło na wysokość okna ekranu.

Za odległość linii od siebie odpowiada – background-size

Wygląd jak z zeszytu w linię

Teraz kiedy wiemy już jak zrobić kratownice bez problemu powinniśmy mogli uzyskać efekt zeszytu w linię.

.linia{
background: #73BCF7;
  background-image: linear-gradient(rgba(100 100 100) .1em, transparent .1em);
  background-size: 1em 1.5em;
height: 90px;
}

Jak widać ten efekt jest bardzo łatwy.

Ciekawe obramowania

Kod CSS:

.object{
  background: #026873;
  padding:15px;
  margin:15px;
  border-radius:15px;
}
.border-1{
  border: 2px solid #03A64A;
}
.border-2{
  border: 2px dashed #03A64A;
  -webkit-box-shadow: 0px 0px 0px 5px #026873;
    box-shadow: 0px 0px 0px 5px #026873;
}
.border-3{
   border: 2px solid #f5f35d;
    -webkit-box-shadow: inset 0px 0px 0px 2px #5df5e8, 0px 0px 0px 2px #f56f5d;
    box-shadow: inset 0px 0px 0px 2px #5df5e8, 0px 0px 0px 2px #f56f5d;
}

Jak widać powyżej w przykładzie drugim udało mi się uzyskać „wewnętrzne obramowanie”. To oczywiście tylko tak wygląda dzięki zastosowaniu cienia pod obiektem.

W trzecim przykładzie mamy zaś 2 kolorowe obramowanie. Efekt ten jest również osiągnięty dzięki cieniowi.

Źródło:

• http://grafmag.pl/artykuly/7-technik-z-wykorzystaniem-css-zamiast-obrazkow/