• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Shadow dla clip-path w css

0 głosów
91 wizyt
pytanie zadane 1 czerwca 2018 w HTML i CSS przez Kiszony Użytkownik (610 p.)
zmienione kategorie 1 czerwca 2018 przez Comandeer

Witam, mam problem ze zrobieniem cienia dla wygenerowanej ścieżki w cssie. Zależy mi na tym żeby żeby ten kształt zyskał wygląd zbliżlony do 3D. Jestem otwarty na wszelakie propzycje.

#wrapper {
    position: relative;
    min-height: 55vw;
    width: 100%;
    overflow: hidden;
    }

  .play {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 12px solid #000;
    border-bottom: 8px solid transparent;
}
.pause {
    width: 4px;
    height: 16px;
    border-right: 4px solid #000;
    border-left: 4px solid #000;
}
#content {
    position: absolute;
    -webkit-clip-path: polygon(100% 35%, 100% 50%, 100% 65%, 30% 65%, 1% 50%, 31% 34%);
    clip-path: polygon(100% 35%, 100% 50%, 100% 65%, 30% 65%, 1% 50%, 31% 34%);
    width: 200px;
    height: 200px;
    z-index: 0;
}
#box {
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  #shadow {
    position: absolute;
    content: "";
    z-index: -1;
    background: rgba(0, 0, 0, 0.5);
    width: 200px;
    height: 200px;
    left: 5px;
    top: -5px;
    -webkit-clip-path: polygon(100% 35%, 100% 50%, 100% 65%, 30% 65%, 1% 50%, 31% 34%);
    clip-path: polygon(100% 35%, 100% 50%, 100% 65%, 30% 65%, 1% 50%, 31% 34%);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jaka to melodia?</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" href="js/main.js"></script>
    <title>Document</title>
</head>
<body>
    <section id="wrapper">
        <div class="play"></div>
        <div class="pause"></div>
        <div class="container">
            <img class="shape" >
        </div>
        <div id="box">
                <img id="content" src="https://i.pinimg.com/originals/47/08/67/470867a1d34e4a33da07f86d7406d5a5.jpg" alt="" >
                <div id="shadow"></div>
              </div>
        
    </section>
    
</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 1 czerwca 2018 przez Tomek Sochacki Mędrzec (177,970 p.)
wybrane 4 czerwca 2018 przez Kiszony
komentarz 1 czerwca 2018 przez Kiszony Użytkownik (610 p.)
Dokładnie o to, rozmycia mi zabrakło :)
komentarz 1 czerwca 2018 przez Kiszony Użytkownik (610 p.)
Jest jakiś sposób żeby ten kształt miał obramówkę i po najechanciu zmieniał kolor/podświetlał się?
komentarz 1 czerwca 2018 przez Tomek Sochacki Mędrzec (177,970 p.)

Dodaj po prostu:

#content:hover {
  background-color: red;
}

w tym przykładzie na codepen. Oczywiście nie styluj po ID :) ten przykład wziąlem sforkowałem z jakiegoś z neta i nie chciało mi się już zmieniać tych id w css tylko trochę poczyściłem parę zbędnych css.

komentarz 2 czerwca 2018 przez Kiszony Użytkownik (610 p.)
Okej, a co z obramówką? Box border nie zadziała ponieważ nie jest to kwadrat ani prostokąt.
komentarz 2 czerwca 2018 przez Tomek Sochacki Mędrzec (177,970 p.)
obramówki są głupie, nie rób ich :)

a tak na serio to hmm... może dać jeszcze jeden element z z-index 2 i wtedy to byłby content właściwy, a pod nim dałbyś element imitujący border (content na najwyższym z-index byłby po prostu mniejszy o np. 1px z każdej strony i przesunięty o tyle do środka).

Daje nam to jednak kolejny element i tym samym nowe obciążenie dla przeglądarki, to taki pomysł na szybko, nie chce mi się już o tej porze patrzeć na codepena więc sam spróbuj coś z tym zrobić. A na pewno potrzebujesz ten border :) ?
komentarz 2 czerwca 2018 przez Kiszony Użytkownik (610 p.)

Był by napewno ciekawym urozmaiceniem do projektu na informatyke, ale czy rzeczywiście jest potrzebny? Wątpie cheeky

Podobne pytania

0 głosów
1 odpowiedź 66 wizyt
pytanie zadane 21 marca w HTML i CSS przez Jan Patryk Kowalski Obywatel (1,660 p.)
0 głosów
2 odpowiedzi 199 wizyt
pytanie zadane 13 listopada 2017 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 11 października 2017 w Systemy operacyjne, programy przez uczen_tech123 Początkujący (420 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

64,016 zapytań

110,391 odpowiedzi

231,155 komentarzy

47,799 pasjonatów

Przeglądających: 304
Pasjonatów: 9 Gości: 295

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...