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. 
Podpowiecie? Jak zacząć?
Gruba linia: border-bottom-size, przysłonienie rogów pseudoklasy :before i :after plus pozycjonowanie tego.
1 polubienie
Fizyda! 
Nie ogarniam programowania, aż na takim poziomie!
.ramka-zdjecia {
border-bottom-size: 20px
}
Podpowiesz jak dalej to rozpisać?
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/
2 polubienia
Fizyda! YOU are my boss!!! Jesteś jak nauczyciel od programowania! Coraz bardziej mi się podoba stopniowe zgłębianie programowania - css / html
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. 
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:
- zapisać odpowiednio przycięte zdjęcie z przeźroczystymi rogami - rogi usuwasz w programie graficznym
- 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/
1 polubienie
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.
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. 
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.
1 polubienie