Красивые цитаты тега blockquote на CSS
 | |
| Вашему вниманию примеры оформления для цитаты тега blockquote на html и CSS. Где тег blockquote идет для выделения оригинального стиля дизайн. Многие такой стиль применяют в оформление, где под цитату выводят самые важные ключевые слова. Так как цитаты стали в современном дизайне уже неотъемлемой частью для тематического интернет портала. Где можно увидеть по полноценном сайте, где подключены множество категорий или видеть на одно страничном сайте. В своей основе цитаты идут на большинство факторов, где можно сказать, что в первую очередь у них одна их многих целей цитирования, это как можно больше привлечь внимание гостей или пользователя, где вывести в оригинальном стиле свое описание, которое явно трудно пропустить. С точки зрения стиля, они предоставляют разработчикам и дизайнерам возможность проявить творческий подход к своим проектам, потому что их можно стилизовать разными способами. Также на сайте уже есть одна подборка цитат в разноплановом формате, что можете посмотреть, тат как они аналогичным способом работают. Здесь идет дополнение, где не нужно забывать, что вы сами уже в CSS самостоятельно можете дополнить оформление или поменять палитру цвета, вообще сделать для себя уникальный формат, чтоб соответствовало основе интернет сайта. Приступаем к установке: Этот снова, которая идет под всю стилистику оформление, которую ставим на странице и внутри его размешаем текст, который в последующим станет цитатой в оформленном стиле, что изначально вы разместили в CSS. HTML Код <blockquote>Здесь размещаем, то что хотите видеть в дизайне цитаты</ blockquote> Первый пример:  CSS Код blockquote { background: none repeat scroll 0 0 #f5ecec; border-bottom: 3px dashed #7d7878; border-top: 3px dashed #7d7878; color: #5d5959; font-family: Georgia,serif; font-size: 16px; font-style: italic; line-height: 1.45; padding: 8px 20px; position: relative; text-align: center; width: 615px; } Здесь делает пунктирные черточки, где внутри их идет описание, которое находиться на светлом фоне. Демонстрация Второй пример:  CSS Код blockquote { background: none repeat scroll 0 0 padding-box rgba(21, 20, 20, 0.92); border-left: 5px solid #9d10b9; box-shadow: 0 0 20px #545151; color: #e0dbdb; font-family: arial; font-size: 16px; font-style: italic; line-height: 1.37; outline: 0 none; padding: 8px 17px; text-align: center; width: 756px; } Здесь сделано в ярком оттенке, где изначально идет в темной гамме цвета. Демонстрация Третий пример:  CSS Код blockquote:after { border-color: #cc7014 transparent transparent; border-style: solid; border-width: 14px; content: ""; display: block; height: 0; position: absolute; right: 57px; top: 100%; width: 0; } blockquote { background: none repeat scroll 0 0 #f9c67c; border: 5px solid #d47211; border-radius: 69px; color: #731e0a; font-style: italic; padding: 9px 18px; position: relative; text-align: center; width: 578px; } Здесь цитата представлена более яркая в светло желтом оттенке цвета с закругленными углами. Демонстрация Четвертый пример:  CSS Код blockquote { background: none repeat scroll 0 0 #d2da5f; color: #2f2f33; font-family: arial; font-size: 16px; font-style: italic; line-height: 1.37; text-align: center; padding: 15px 38px; position: relative; width: 623px; box-shadow: 0 1px 2px rgba(12, 12, 12, 0.29), 0 0 10px rgba(12, 12, 12, 0.14) inset; } blockquote:before{ position:absolute; margin-top:-27px; margin-left:-38px; content:url('http://zornet.ru/ABVUN/Abas/degakolas/webof.png'); } blockquote:after { z-index: -1; position: absolute; content: ""; bottom: 14px; right: 8px; left: auto; width: 48%; top: 75%; -webkit-box-shadow: 0 19px 7px #a09b9b; -moz-box-shadow: 0 19px 7px #a7a7a7; box-shadow: 0 19px 7px #a29b9b; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } В этом варианте задействовали ссылку под дизайн, что безусловно украшает. Демонстрация Пятый пример:  CSS Код blockquote { padding: 29px 18px 29px 42px; width: 618px; background-color: #1f7cbb; color: #eae9e9; box-shadow: 0 5px 2px rgba(16, 16, 16, 0.1); position: relative; transition: background-color 0.6s linear; } blockquote:after { content: " "; height: 0; width: 0; position: absolute; top: 100%; border: solid rgba(0, 0, 0, 0); border-top-color: #1f7cbb; border-left-color: #1f7cbb; border-width: 9px; left: 8%; } blockquote:before { color: #f1f1f1; content: "“"; display: block; font-size: 79px; left: 6px; position: absolute; top: -9px; } Этот вид больше на стандартный идет, что также можно увидеть на многих сайта в своем оттенке цвета. Здесь сам веб разработчик при помощи стилей самостоятельно ставит ту палитру оттенка, которую посчитает нужным для сайта или для красоты. Демонстрация Чтобы создать красиво выполненную цитату на странице, вам нужно выбрать стиль, который вы хотите видеть на своем сайте. Где в аналогичном способе есть вариант на размещение нескольких форматов. Где его помещаем в CSS, а потом берем кусок описание или то, что вам требуется выделить и помешаем в blockquote, где при обновлении появится выделенный вами текст в оригинальной стилистике. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
