Задать вопрос

katrinab

Лайки

  • Как реализовать треугольник с border: dashed у div блока?

    Sprime
    @Sprime
    HTML-верстальщик
    Например вот так

    HTML:
    <div class="block">
    some text
    <span class="triangle"></span>
</div>

    CSS:
    .block {
    width: 400px;
    padding: 10px;
    background: #fff;
    min-height: 100px;
    position: relative;
    border: 1px dashed #aaa;
    margin: 10px 10px 10px 40px;
}
.block span.triangle {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    top: 30px; left: -30px;
    border-bottom: 30px solid #fff; 
    border-left: 30px solid transparent;			
}
.block span.triangle:before {
    content: '';
    width: 40px;
    display: block;
    position: absolute;
    top: 15px; left: -35px;
    border-top: 1px dashed #aaa;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.block span.triangle:after {
    content: '';
    width: 30px;
    display: block;
    position: absolute;
    top: 30px; left: -30px;
    border-top: 1px dashed #aaa;
}

    jsfiddle.net
    Ответ написан
    1 комментарий
    1 комментарий

  • Эффект блика на рамке css?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    во время прокрутки

    это событие в js, так что на css никак. css+js можно. Геморройно-ювелирная работа предстоит Вам.

    Ну а если производительность нас не интересует, можно js либы поискать, которые реализуют источник изображения и материалы.
    Ответ написан
    Комментировать
    Комментировать

  • Эффект блика на рамке css?

    @mletov
    А эта штука адаптивная? И по вертикали должна тянуться? А как ведут себя эти блики при растяжении?
    Очень уж все жестко нарисовано, возможностей для маневра мало. Где-то чуть больше текста - и все поплывет.
    Ощущение, что очередной дизайнер полиграфии решил себя попробовать на поприще веба.

    Какие варианты можно попробовать:
    1) Делать каждый блик абсолютно позиционированным дивом с box-shadow. Но не уверен, что удастся воспроизвести блики точь-в-точь.
    2) Старый добрый хардкорный путь: каждый блик вырезать как png и опять же абсолютно позиционированные дивы.
    3) Возможно, что-то такое svg умеет.

    PS честно говоря, хотелось бы самому увидеть красивое решение, если такое есть.
    Ответ написан
    Комментировать
    Комментировать

  • Эффект блика на рамке css?

  • Эффект блика на рамке css?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Вот накидал блики, при желании можно раскачать до вполне приемлемого состояния https://jsfiddle.net/l2banners/tjm7p1r6/4/

    по поводу косых линий на фоне, они сплошные, их можно в ксс сделать и под низ положить впринципе это не сложно, ну а сами блоки сделать белыми почти прозрачными... Ну и все, тени тоже не проблема, тени можно через js двигать при прокрутке
    Ответ написан
    Комментировать
    Комментировать