Ramka do zdjęć w CSS


(Jakim2400) #1

Witajcie! Kombinuję jak zrobić w css taką ramkę jak na powyższym przykładzie. Na dole grubsza linia. 2 rogi obcięte. Wokół lekka kreska. :slight_smile:

Podpowiecie? Jak zacząć?


(Fizyda) #2

Gruba linia: border-bottom-size, przysłonienie rogów pseudoklasy :before i :after plus pozycjonowanie tego.


(Jakim2400) #3

Fizyda! :smiley: Nie ogarniam programowania, aż na takim poziomie! :smiley:

.ramka-zdjecia {
border-bottom-size: 20px
}

Podpowiesz jak dalej to rozpisać?


(Fizyda) #4

Działający przykład: https://jsfiddle.net/pxoecyzg/
To co jest pod pustym komentarzem jest dla Ciebie interesujące, reszta to tylko kod który ma sprawić że przykład wyświetli się w bardziej czytelnej formie.

A jak dodasz radius na border to jeszcze fajniejszy efekt można uzyskać: https://jsfiddle.net/904g8h1e/

EDIT:
Jeszcze wpadłem, że może Ci chodzić o taki efekt:
https://jsfiddle.net/b1swpudx/


(Jakim2400) #5

Fizyda! YOU are my boss!!! Jesteś jak nauczyciel od programowania! Coraz bardziej mi się podoba stopniowe zgłębianie programowania - css / html :smiley:


(Jakim2400) #6

Fizyda! A znasz trik, żeby te ucięte rogi na górze były przeźroczyste, a nie białe? Dałem komendę: transparent zamiast white, ale nie działa. Przydałoby się w momencie, kiedy dam na stronie jakieś inne tło niż białe. :slight_smile:


(Fizyda) #7

Nie da rady. Tutaj trik polega na przysłonięciu/zasłonięciu zdjęcia. Więc nie uzyskasz przeźroczystego tła w zasłanianych elementach. To tak jak zasłonisz kartką kawałek zdjęcia, z wierzchu zdjęcie jest innych rozmiarów, ale pod tą kartką dalej jest fragment zdjęcia.
Aby uzyskać to co chcesz musiałbyś przyciąć zdjęcie. Tutaj opcje są dwie:

  1. zapisać odpowiednio przycięte zdjęcie z przeźroczystymi rogami - rogi usuwasz w programie graficznym
  2. przycinasz zdjęcie do zadanego kształtu dynamicznie

Druga opcja jest możliwa, ale to już wyższa szkoła jazdy bo trzeba bawić się w elemencie canvas html5, tam możesz utworzyć kształt jaki chcesz by zdjęcie uzyskało, dostosować je do wymiarów zdjęcia, a następnie nad tym kształtem umieścić zdjęcie i je przyciąć do kształtu pod nim. Problem w tym, że nie wyświetlisz już w ten sposób zdjęcia przy pomocy img, a dodatkowo musisz napisać jeszcze trochę kodu JS który to wszystko co wyżej napisałem będzie robił w sposób automatyczny.

Alternatywnie znalazłem coś takiego, ale ze wsparciem tego jest rożnie: https://css-tricks.com/clipping-masking-css/


(krystian3w) #8
maski SVG, ale też jest obszerny opis w linku do 'css-tricks.com'

Jeszcze można maską z grafiką SVG:

<style>
.avatar-image-container{
     border-radius:0px;
}
.avatar-image-container > img{
    mask:url("#profilki_avatar_mask");
    -webkit-mask-image:url("http://profilki.pl/svgm/serce.svg");
}
</style>

<?xml version="1.0" encoding="utf-8"?><!doctype svg public "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="36px" height="36px" viewbox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve"><defs><mask id="profilki_avatar_mask"><path fill="#FFFFFF" d="M18 6.75c2.25,-4.5 4.5,-6.75 9,-6.75 4.9689,0 9,4.0311 9,9 0,9 -9,18 -18,27 -9,-9 -18,-18 -18,-27 0,-4.9689 4.0311,-9 9,-9 4.5,0 6.75,2.25 9,6.75zm-1.60748 -2.89252m0.596457 1.00984m-0.111024 -0.164173m-0.0212598 -0.0507874m0.0283465 0.0519685m-0.0129921 -0.0224409"/></path></mask></defs><g style="visibility: hidden"><path fill="#000000" d="M18 6.75c2.25,-4.5 4.5,-6.75 9,-6.75 4.9689,0 9,4.0311 9,9 0,9 -9,18 -18,27 -9,-9 -18,-18 -18,-27 0,-4.9689 4.0311,-9 9,-9 4.5,0 6.75,2.25 9,6.75zm-1.60748 -2.89252m0.596457 1.00984m-0.111024 -0.164173m-0.0212598 -0.0507874m0.0283465 0.0519685m-0.0129921 -0.0224409"/></path></g></svg></!doctype></?xml>">

Minus, jak dla mnie trudne w skalowaniu pod większe obrazy i z różnymi proporcjami.


(Jakim2400) #9

Widzę, że faktycznie wyższa szkoła jazdy. Najgorsze jest to, że jak już zaimplementuję ramkę do css (za pomocą wtyczki, która nadpisuje), a później wklejam w WP w opcjach zdjęcia odpowiednią klasę to nie wczytuje ramki. :frowning:


(Fizyda) #10

Pewnie ten sam problem co był poruszony w innym wątku - nadpisujące się style.
Bez wglądu do strony to wróżenie z fusów jest bardziej wiarygodne niż dawanie rad w ciemno.