Вариант 1:
Опасность не в том, что компьютер однажды начнет мыслить, как человек, а в том, что человек однажды начнет мыслить, как компьютер.
Sydney J. Harris
1 2 3 4 |
<blockquote class="blockquote-1"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-1 { box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2); margin: 16px 16px 30px 16px; padding: 16px 24px; position: relative; font-size: 16px; background: #efefef; color: #000; font-style: italic; } .blockquote-1::before { border: 14px solid transparent; border-top: 14px solid #efefef; border-bottom: 0; height: 0; width: 0; border-top-width: 25px; content: ''; display: block; position: absolute; left: 40px; bottom: -25px; transform-origin: center; transform: rotate(90deg) skew(-25deg) translateY(17px); } .blockquote-1 cite { position: absolute; bottom: -24px; left: 62px; font-size: 13px; font-style: normal; font-weight: 300; color: #000; } |
Вариант 2:
Вариант очень похож на первый, с небольшим отличием.
Кавычка “ ставится для тега <p>
в цитате.
Контент предшествует дизайну. Дизайн без контента не дизайн, это – художественное оформление.
Jeffrey Zeldman
1 2 3 4 |
<blockquote class="blockquote-2"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-2 { margin: 16px 16px 30px 16px; padding: 26px 24px; font-size: 16px; background: #BFE2FF; border-left: 5px solid; border-color: #337AB7; } .blockquote-2::after { content: ''; margin-top: -30px; padding-top: 0; position: relative; bottom: -50px; left: 20px; border-width: 30px 0 0 30px; border-style: solid; border-color: #BFE2FF transparent; display: block; width: 0; } .blockquote-2 p::before { content: "“"; font-family: Georgia; font-size: 40px; line-height: 0; display: inline-block; } .blockquote-2 cite { float: right; font-size: 13px; } .blockquote-2 cite:before { content: '- '; } |
Вариант 3:
Работает? Не трогай!
Любой программист
1 2 3 4 |
<blockquote class="blockquote-3"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-3 { position: relative; text-align: center; margin: 16px 16px 34px 16px; border: 4px solid #337AB7; border-radius: 20px; padding: 16px 24px; font-size: 18px; } .blockquote-3:before, .blockquote-3:after { content: ''; position: absolute; width: 0; height: 0; } .blockquote-3:before { left: 30px; bottom: -32px; border: 16px solid; border-color: #337AB7 transparent transparent #337AB7; } .blockquote-3:after { left: 35px; bottom: -21px; border: 12px solid; border-color: #fff transparent transparent #fff; } .blockquote-3 cite { position: absolute; bottom: -28px; left: 62px; font-size: 15px; font-weight: bold; color: #337AB7; } |
Вариант 4:
Помните, что обычно есть решение проще и быстрее того, что первым приходит вам в голову.
Donald Knuth
1 2 3 4 |
<blockquote class="blockquote-4"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-4 { position: relative; font-size: 16px; margin: 16px 16px 46px 16px; border: 2px solid #337AB7; border-radius:20px; padding: 25px; } .blockquote-4::after { content:""; position: absolute; border: 2px solid #337AB7; border-radius: 0 50px 0 0; width: 40px; height: 40px; bottom: -40px; left: 50px; border-bottom: none; border-left: none; z-index: 2; box-sizing: border-box; } .blockquote-4::before { content:""; position: absolute; width: 80px; border: 6px solid #FFF; bottom: -3px; left: 50px; z-index: 1; } .blockquote-4 cite { position: absolute; bottom: -30px; left: 110px; font-size: 13px; font-weight: bold; color: #337AB7; } |
Вариант 5:
1 2 3 4 |
<blockquote class="blockquote-5"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-5 { position: relative; padding: 16px 24px; margin: 16px 16px 26px 16px; font-size: 16px; border-top: 2px solid #337AB7; border-bottom: 2px solid #337AB7; } .blockquote-5::after { font-family: Times, sans-serif; font-weight: bold; position: absolute; content: "”"; color: #BFE2FF; font-size: 160px; line-height: 0; bottom: -22px; right: 30px; text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7; } .blockquote-5 cite { color: #337AB7; font-size: 15px; padding-top: 20px; display: block; } |
Вариант 6:
Если Вы сделаете хорошую работу для хороших клиентов, то это приведет к следующей хорошей работе для других хороших клиентов. А если Вы сделаете плохую работу для плохих клиентов, то это, в свою очередь, приведет к другой плохой работе для других плохих клиентов.
Michael Bierut
1 2 3 4 |
<blockquote class="blockquote-6"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-6 { border-left: 6px solid #BFE2FF; font-size: 16px; font-style: italic; margin: 16px; padding: 16px 24px; position: relative; } .blockquote-6:before { content: ""; position: absolute; top: 50%; left: -6px; height: 40px; background-color: #fff; width: 6px; margin-top: -1em; } .blockquote-6:after { content: "”"; position: absolute; top: 50%; left: -20px; color: #337AB7; font-size: 50px; font-family: Times, sans-serif; font-weight: bold; line-height: 30px; } .blockquote-6 cite { color: #337AB7; font-size: 15px; padding-top: 10px; display: block; text-align: right; } |
Вариант 7:
Очень простой пример с тенью.
Сократ говорил «Познай себя». А я говорю «Познай своих пользователей». И знаете что? Они не думают, так же как и вы.
Joshua Brewer
1 2 3 4 |
<blockquote class="blockquote-7"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.blockquote-7 { border: 2px solid #337AB7; font-size: 16px; font-style: italic; margin: 16px 31px 31px 16px; padding: 16px 24px; position: relative; box-shadow: 15px 15px 0 0 #337AB7; } .blockquote-7 cite { color: #337AB7; font-size: 15px; padding-top: 10px; display: block; text-align: right; } |
Вариант 8:
Я хочу создавать красивые вещи, даже если это никому не нужно, в качестве противостояния некрасивым вещам. Это – мое намерение
Saul Bass
1 2 3 4 |
<blockquote class="blockquote-8"> <p>Текст цитаты</p> <cite>Автор цитаты</cite> </blockquote> |
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 |
.blockquote-8 { position: relative; padding: 16px 24px; margin: 16px 46px; font-size: 16px; text-align: center; } .blockquote-8:before, .blockquote-8:after { position: absolute; color: #BFE2FF; font-size: 100px; font-family: Times, sans-serif; line-height: 100px; } .blockquote-8:before { content: '“'; left: -30px; top: -10px; } .blockquote-8:after { content: '”'; right: -30px; bottom: -10px; } .blockquote-8 cite { color: #337AB7; font-size: 15px; padding-top: 10px; display: block; } |
Спасибо, у вас хороший сайт.
Все очень круто расписано и понятно, цитаты огонь, спасибо большое
Спасибо. Все написано доступным языком.