Вариант 1:
Вариант с изменяющимся свойством border-radius
. Он имеет заданную ширину и длину, поэтому их стоит подгонять под размер расположенного в нем контента.
1 |
<div class="ramka-1">Рамка 1</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.ramka-1 { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin: 30px auto; border: 8px solid #337AB7; background: #BFE2FF; border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; box-shadow: 15px 15px 50px rgba(0,0,0,0.2); animation: anim-ramka-1 10s infinite; font-size: 24px; font-family: 'Roboto', sans-serif; } @keyframes anim-ramka-1 { 0% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; box-shadow: 15px 15px 50px rgba(0,0,0,0.2); } 25% { border-radius: 58% 42% 75% 25%/76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67%/55% 27% 73% 45%; box-shadow: -10px -5px 50px rgba(0,0,0,0.2); } 75% { border-radius: 33% 67% 58% 42%/63% 68% 32% 37%; } } |
Вариант 2:
Рамка с бегущими полосками. Данный блок также имеет заданную ширину и высоту.
1 2 3 |
<div class="ramka-2-wr"> <div class="ramka-2">Рамка 2</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.ramka-2-wr { width: 200px; height: 200px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; margin: 30px auto; } .ramka-2-wr .ramka-2 { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto', sans-serif; } .ramka-2-wr::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( #FFF 0%, #FFF 7.5px, #BFE2FF 7.5px, #BFE2FF 15px, #FFF 15px, #FFF 22.5px, #BFE2FF 22.5px, #BFE2FF 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: anim-ramka-2 20s linear infinite; } .ramka-2-wr .ramka-2 { position: relative; background-color: #FFF; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .ramka-2-wr, .ramka-2-wr .ramka-2 { box-shadow: 0 0 2px #BFE2FF, 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; } @keyframes anim-ramka-2 { from { background-position: 0; } to { background-position: 0 450px; } } |
Вариант 3:
Блок с плавающим бордюром и ховер-эффектом. Он, как и предыдущие, имеет заданную ширину и высоту.
1 |
<div class="ramka-3">Рамка 3</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.ramka-3 { display: flex; align-items: center; justify-content: center; position: relative; margin: 30px auto; width: 200px; height: 200px; font-size: 24px; font-family: 'Roboto', sans-serif; box-shadow: inset 0 0 0 1px #337AB7; } .ramka-3::before, .ramka-3::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 6px #BFE2FF; animation: anim-ramka-3 8s linear infinite; } .ramka-3::before { animation-delay: -4s; } .ramka-3:hover::after, .ramka-3:hover::before { background-color: #BFE2FF; } @keyframes anim-ramka-3 { 0%, 100% { clip: rect(0px, 220px, 6px, 0px); } 25% { clip: rect(0px, 6px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } } |
Вариант 4:
Вариант очень похожий на предыдущий.
1 2 3 4 5 6 7 |
<div class="ramka-4"> <span></span> <span></span> <span></span> <span></span> Рамка 4 </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.ramka-4 { position: relative; width: 200px; height: 200px; margin: 30px auto; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto', sans-serif; } .ramka-4 span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; box-sizing: border-box; z-index: -1; } .ramka-4 span:nth-child(1) { transform:rotate(0deg); } .ramka-4 span:nth-child(2) { transform:rotate(90deg); } .ramka-4 span:nth-child(3) { transform:rotate(180deg); } .ramka-4 span:nth-child(4) { transform:rotate(270deg); } .ramka-4 span:before { content: ''; position: absolute; width:100%; height: 6px; background: #BFE2FF; animation: anim-ramka-4 4s linear infinite; } @keyframes anim-ramka-4 { 0% { transform:scaleX(0); transform-origin: left; } 50% { transform:scaleX(1); transform-origin: left; } 50.1% { transform:scaleX(1); transform-origin: right; } 100% { transform:scaleX(0); transform-origin: right; } } |
Вариант 5:
Эта рамка может иметь не 2 цвета, как на примере, а 4. А еще можно получить интересный эффект убрав overflow: hidden
1 |
<div class="ramka-5">Рамка 5</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.ramka-5 { position: relative; z-index: 0; width: 200px; height: 200px; border-radius: 10px; overflow: hidden; margin: 30px auto; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto', sans-serif; } .ramka-5::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #BFE2FF; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#BFE2FF, #BFE2FF), linear-gradient(#337AB7, #337AB7), linear-gradient(#BFE2FF, #BFE2FF), linear-gradient(#337AB7, #337AB7); animation: anim-ramka-5 4s linear infinite; } .ramka-5::after { content: ''; position: absolute; z-index: -1; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: white; border-radius: 5px; } @keyframes anim-ramka-5 { 100% { transform: rotate(1turn); } } |
Вариант 6:
Однократная обводка блока рамкой при наведении
1 |
<div class="ramka-6">Рамка 6</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.ramka-6 { width: 200px; height: 200px; margin: 30px auto; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto', sans-serif; background-repeat: no-repeat; background-image: linear-gradient(to right, #BFE2FF 100%, #BFE2FF 100%), linear-gradient(to bottom, #BFE2FF 100%, #BFE2FF 100%), linear-gradient(to right, #BFE2FF 100%, #BFE2FF 100%), linear-gradient(to bottom, #BFE2FF 100%, #BFE2FF 100%); background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; animation: anim-ramka-6 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1; animation-play-state: paused; } .ramka-6:hover { animation-play-state: running; } @keyframes anim-ramka-6 { 0% { background-size: 0 6px, 6px 0, 0 6px, 6px 0; } 25% { background-size: 100% 6px, 6px 0, 0 6px, 6px 0; } 50% { background-size: 100% 6px, 6px 100%, 0 6px, 6px 0; } 75% { background-size: 100% 6px, 6px 100%, 100% 6px, 6px 0; } 100% { background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%; } } |
Вариант 7:
Вариант с большой рамкой и ховер-эффектом
1 |
<div class="ramka-7">Рамка 7</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.ramka-7 { width: 200px; height: 200px; background-color: #FFF; position: relative; margin: 60px auto; display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: 'Roboto', sans-serif; box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4); } .ramka-7:after, .ramka-7:before { mix-blend-mode:multiply; filter:none; z-index: -1; content:''; width: calc(100% + 90px); height: calc(100% + 90px); position: absolute; animation: anim-ramka-7 8s ease-in-out infinite; } @keyframes anim-ramka-7 { 0%, 100% { clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px))); } 50% { clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%); } } .ramka-7:after{ animation-delay: -5s; background-color: #BFE2FF; clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px))); } .ramka-7:before { background-color: #337AB7; clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%); } .ramka-7:hover:before, .ramka-7:hover:after { animation-play-state: paused; } |
Я захотел объединить две рамки:
Одна радужная рамка с анимацией-градиентом и "рамка 1" и добавить последнюю рамку для контура И ПОЛУЧИЛОСЬ ОЧЕНЬ КРАСИВО:
Держите код если что 🙂и в выделенных местах поставьте скобки!
извините но жирный шрифт не сработал поэтому поставьте в:
html
head
title
style
div class="block"
просто сайт не принимает скобки 🙁
Скиньте плиз полностью CSS-код.
У меня не получилось сделать рамку как она была вами задумана (только градиент фона)
Сайт принимает скобки, а вот теги не все (скрипт, хтмл, титле, стиль), а они и не нужны.
Я потом отредактирую комменты
ссылка на мой codepen вот
нажми сюда
У меня так и получилось 🙂
Только что то не так тут...
Ну неплохо.
Круто!!))
Класс! Я из первого варианта кнопку на звонок сделал!)))
Как рамку растянуть на 100%?
Как можно сдвинуть её влево?
Изменить margin, убрать или заменить оттуда auto
Рамка 7 не двигается на старых телефонах подскажите почему или сбросьте код рабочий пожалуста
И не корректно отображается . со здвигом как будто flex не работает((((
Пробовать надо, если flex убрать, то удаляем:
Ставим центр и нужный padding:
А сюда добавляем:
Да спасибо все заработало я ещё -webkit- добавил и ок спасибо огромное
Уже всё получилось! Спасибо!
Спасибо! Очень помогла информация.
А как мне поменять цвет и почему то рамку вообще почти невидно там буквально меньше пикселя
Цвет задается в хексе, например #BFE2FF или #337AB7, а почему не видно рамку, это смотреть нужно.
Отличные примеры!
Классная статья! Спасибо!
Довольно таки интересные рамки!А как вставить фото в рамку?
Вместо слова рамка 🙂
А дальше посмотреть, что получится и подогнать при необходимости