как создать новостную ленту
Как сделать ленту статьей со страницами?
Здравствуйте, я начинающий верстальщик. Я хочу узнать как сделать на сайте "ленту новостей со.
Как вставить новостную ленту (rss) в html?
Попробовала такой вариант: но ничего не получилось.. выдает ошибку. я так понимаю, что.
Как лучше организовать новостную ленту в социальной сети
Столкнулся с проблемой, что при создании новостной ленты для социалки может получиться просто.
Готовы движок на новостную ленту
Всем привет. Посоветуйте готовый движок на новостную ленту.. Типа как disqus, но не на .
Как сделать ленты на CSS3 без картинок
В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.
Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега .
My Heading
Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.
/* элемент с контентом */ #page < width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; border: 1px solid #333; >h2
В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используем position: relative чтобы при необходимости можно было позиционировать другие элементы ленты.
Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.
h2:after
Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before .
Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.
h2:before
Цвет границы у псевдоэлемента должен совпадать с цветом фона h2 , поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.
Пожалуйста, ознакомьтесь с демонстрационной страницей где показаны все три стиля ленты. Как и ожидалось, это работает в IE8, IE9, Firefox, Chrome, Safari и Opera. IE6 и IE7 показывают изящную деградацию и отображают основной заголовок. Весь код CSS содержится внутри HTML.
Как сделать ленту, повернутую на 45 градусов, с загнутым уголком?
Можно ли создать ленту css в форме угла? Я пробовал с изображением png, но есть ли возможность создать с помощью css?
А также решение должно быть отзывчивым.
.container < width: 200px; height: 200px; position: relative; margin: 20px; overflow: hidden; >.box < width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.8; /* for demo purpose */ >.stack-top < height: 30px; z-index: 9; margin: 40px; /* for demo purpose */ transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/ transition: transform 2s; color: #fff; > 1Month Отслеживать
задан 14 апр 2021 в 18:48
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
ассоциация:stackoverflow.com/q/63128872/7394871
14 апр 2021 в 18:48
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вы можете попробовать, как показано ниже:
.container < width: 200px; height: 150px; position: relative; display:inline-block; margin: 10px; background: lightblue; >.stack-top < /* adjust the below to control the shape */ --d:5px; --g:16px; --c:#333; /**/ position: absolute; top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */ color: #fff; text-align: center; width: 100px; transform-origin: bottom left; padding:5px 0 calc(var(--d) + 5px); background: linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left, linear-gradient(-135deg,transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right; background-size:51% 100%; background-repeat:no-repeat; clip-path:polygon(0 0,100% 0,100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)),0 100%) > 1Month 1Month XX 1Month 
Еще одна корректировка для добавления эффекта тени к загнутой части:
.container < width: 200px; height: 150px; position: relative; display:inline-block; margin: 10px; background: lightblue; >.stack-top < /* adjust the below to control the shape */ --d:5px; --w:100px; --c:#333; /**/ position: absolute; top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */ color: #fff; text-align: center; width: var(--w); transform-origin: bottom left; padding:5px 0 calc(var(--d) + 5px); background: linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat var(--c); clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d))) > 1Month 1Month XX 1Month 
Вы можете добавить опцию позиционирования:
.container < width: 200px; height: 150px; position: relative; display:inline-block; margin: 10px; background: lightblue; >.stack-top < /* adjust the below to control the shape */ --d:5px; --w:100px; --c:#333; /**/ position: absolute; top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */ color: #fff; text-align: center; width: var(--w); transform-origin: bottom left; padding:5px 0 calc(var(--d) + 5px); background: linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat var(--c); clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d))) >.stack-top.left
1Month 1Month XX 1Month 
Отслеживать
ответ дан 14 апр 2021 в 18:48
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
- html
- css
- вёрстка
- css-shapes
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать красивую CSS ленту (ribbons) для заголовков
Всем читателя блога, доброго времени суток. Сегодня давайте узнаем как с помощью CSS сделать красивые ленты на заголовках (ribbons). Теперь давайте разберёмся для чего нужны эти ленты? Ну как же для чего? 🙂 В первую очередь — очень удобно для пользователей, данные заголовки будут выделяться, и мимо их тяжело будет пройти, а во вторую очередь, естественно для красоты.
Ну а сейчас, непосредственно, давайте перейдём к лентам.
Структура CSS лент для заголовков
Для начала нам нужно создать саму оболочку для лент или где будет заголовок — это обычный прямоугольник с отступом по краям padding: 20px
Теперь в этот прямоугольник давайте вставим какой нибудь элемент, например h1:
Стили
Ну сейчас к элементу h1 добавим некоторые стили:
Вот, что у нас должно получиться:
Как видите, лента для заголовка уже начала появляться, но и это ещё не всё. Теперь нужно дать ей красивый вид, и делать мы это будем с помощью CSS.
h1 < text-align: center; position: relative; color: #fff; margin: 0 -30px 30px -30px; padding: 10px 0; text-shadow: 0 1px rgba(0,0,0,.8); background: #5c5c5c; background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: 0 2px 0 rgba(0,0,0,.3); >h1:before, h1:after < content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -10px; >h1:before < border-width: 0 10px 10px 0; border-right-color: #222; left: 0; >h1:after
Теперь давайте посмотрим, что получилось:
Сразу же говорю, что это самый простой вариант, так сказать «база», естественно можно или даже нужно экспериментировать, например, добавить изображение, градиент, или закруглить углы, а затем правильно подобрать цвета, всем этим можно добиться замечательного эффекта.
А вот пример какую можно сделать ленту для заголовков: