• 0
EugeneKiyash

Как лучше реализовать декоративную рамку?

    Вопрос

    EugeneKiyash

    Есть макет с эффектом рамки на заднем фоне.

    Как считаете как лучше реализовать этот эффект? Как бы сделали это вы?

    border || border-image || svg || css-mask

    Или что-то другое???

    Спасибо!

    Кому интересно -  ССЫЛКА на весь макет!

    mauntains.JPG

    Изменено пользователем EugeneKiyash

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    10 ответов на этот вопрос

    Рекомендуемые сообщения

    • 1
    Tilonorrinco

    Я немного поизвращался в песочнице и получилось вот так:

    https://jsfiddle.net/bth3uuL4/2/

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 1
    npofopr

    Точно, пустить верхнюю или нижнюю линию как отдельный элемент. 

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    npofopr

    Отрезать голову и прилепить сверху :-D 

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    EugeneKiyash

    А чтобы мужика отдельным блоком не вставлять. как думаете, можно???

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Tilonorrinco
    В 13.02.2017 в 11:24, EugeneKiyash сказал:

    А чтобы мужика отдельным блоком не вставлять. как думаете, можно???

    Мужика тоже можно сделать через псевдоэлемент.

    https://jsfiddle.net/bth3uuL4/3/

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    EugeneKiyash
    7 часов назад, Tilonorrinco сказал:

    Мужика тоже можно сделать через псевдоэлемент.

    https://jsfiddle.net/bth3uuL4/3/

     

    В общем так и сделал! До-верстаю - выложу, покажу!

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    mrnobody

    А вы макет взяли из рассылки HTML Academy? А то я смотрю в рассылке такой же.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    EugeneKiyash
    В 14.02.2017 в 21:41, mrnobody сказал:

    А вы макет взяли из рассылки HTML Academy? А то я смотрю в рассылке такой же.

    Да, беру оттуда макеты на тренировку.

    C рамкой на заднем фоне разобрался - https://eugene-ki.github.io/. Отрезал голову мужику:P и вставил как bg-i псевдоэлементу, +поигрался с z-index-ми. И пришлось применить свойство clip чтобы обрезать этот элемент до примерного размера головы мужика, чтобы не закрывал другие элементы, т.к. полноценно через z-index-ы сделать не получилось.

    Ну вроде все норм, работает везде(ie9+)

     

    Еще один из этой рассылки уже сделал, пытаясь принести каплю адаптивности через @media_queries: http://matrix1320.xyz/panakeia/

    Изменено пользователем EugeneKiyash

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    EugeneKiyash
    В 16.02.2017 в 21:24, EugeneKiyash сказал:

    Да, беру оттуда макеты на тренировку.

    C рамкой на заднем фоне разобрался - https://eugene-ki.github.io/. Отрезал голову мужику и вставил как bg-i псевдоэлементу, +поигрался с z-index-ми. И пришлось применить свойство clip чтобы обрезать этот элемент до примерного размера головы мужика, чтобы не закрывал другие элементы, т.к. полноценно через z-index-ы сделать не получилось.

    Ну вроде все норм, работает везде(ie9+)

     

    Еще один из этой рассылки уже сделал, пытаясь принести каплю адаптивности через @media_queries: http://matrix1320.xyz/panakeia/

    Ошибся! Поддержка  ie10+. Забыл про Flexbox

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    EugeneKiyash

    если кто захочет посмотреть, поменялся адрес:

    http://matrix1320.xyz/mountain/

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • aversa121
        Автор: aversa121
        Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)
        <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="reviews.css"> </head> <body> <style type="text/css"> .uc-reviws { position: relative; display: block; } .uc-reviews-slider{ overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .uc-reviews-slider-wrapper{ max-width: 100%; overflow: hidden; position: relative; display: block; } .uc-reviews-slider-wrapper > .uc-reviews-list:after { clear: both; } .uc-reviews-slider-wrapper .uc-reviews-list{ -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .uc-reviews-list:before { content: " "; display: table; } .uc-reviews-slider-wrapper > *.active { z-index: 10; } .uc-reviews-slider-wrapper > *.active { opacity: 1; } .uc-reviews-block{ cursor: -webkit-grab; float: left; display: list-item; text-align: -webkit-match-parent; margin: 0px 0 0 0; position: relative; } .uc-reviews-img{ width: 100%; height: 100%; position: relative; z-index: 55; } .uc-reviews-wrapper{ position: absolute; z-index: 77; top: 0; margin: -0.7% 0 0 50%; padding-top: 40px; min-height: 100%; max-width: 1600px; box-sizing: border-box; display: block; } .uc-reviews-text { width: 485px; left: 50%; padding: 30px 0 0 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .uc-reviews-text-outer-type-a:before{ content: ''; position: absolute; left: 11px; background: #3c3c3c; width: 28px; height: 2px; margin: 9px 0 15px 0; } .uc-reviews-text-outer-type-a p { font-size: 17px; font-family: Lato_regular; line-height: 22px; color: #000; margin: 0 0 20px 0; position: relative;} .uc-reviews-text-outer-type-b p { font-size: 16px; font-family: Lato_italic; color: #747474; margin: 20px 0 0 0; } .uc-reviews-slider:after { clear: both; content: " "; display: table; } .uc-reviews-buttom { display: block; } .uc-reviews-buttom_left { width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; opacity: 0.8; margin-top: -16px; background-position: 0 0; left: 30px; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .uc-reviews-buttom_right{ width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; margin-top: -16px; opacity: 0.8; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; background-position: -32px 0; right: 30px; } .uc-reviews-number { position: relative; bottom: 67px; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; cursor: pointer; } .uc-reviews-slider .uc-reviews-number > li:hover a, .uc-reviews-slider .uc-reviews-number > li.active a { background-color: #428bca; } .uc-reviews-slider .uc-reviews-number { margin: 10px 0 0; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number-position { cursor: pointer; display: inline-block; padding: 0 5px; } </style> <div class="uc-reviews"> <div class="uc-reviews-slider "><div class="uc-reviews-slider-wrapper" style="transition-duration: 1000ms; transition-timing-function: ease;"> <ul class="uc-reviews-list" style="width: 9443px; transform: translate3d(-2698px, 0px, 0px); height: 424px; padding-bottom: 0%;"> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“Management of the centre frequently engages media to showcase the success of their residents.</p> <p>iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”</p> </div> <p class="review-bg-text-outer-type-b"> Nikita Dobrynin &amp; Katia Dobrynina, Founders @ AstraFit </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li></ul> <div class="uc-reviews-buttom"> <a class="uc-reviews-buttom_left"></a> <a class="uc-reviews-buttom_right"></a></div></div> <ul class="uc-reviews-number" style="margin-top: 5px; transform: translate3d(0px, 0px, 0px);"> <li class="uc-reviews-number-position"><a href="#">1</a> </li> <li class="uc-reviews-number-position"><a href="#">2</a> </li> <li class="uc-reviews-number-position"><a href="#">3</a></li></ul></div> </div> </body> </html>  
      • Angel_33_3
        Автор: Angel_33_3
        Внутри блока с основным контентом нужна фиксированная кнопка при нажатии по которой будет выезжать div блок и этот блок должен растягивается по все высоте экрана. Внешне это я реализовал вот так Пример кода
        Проблема в том, что сейчас блок fixed-block, который поверх всего, перекрывает контент и не позволяет взаимодействовать с ним.
        Может кто-то подскажет как избежать это проблемы и внешне оставить все так же?

    Карта разработчиков

    Карта участников

    Отметь себя на карте для поиска или предложения работы