Я надеюсь вам понравилось. Давайте теперь реализуем это на css 3. Ниже представлю сам код, а потом роспишим, что и как.
Код CSS3
.podskazka{
position:relative;
padding:15px; // Отступ
color:#000; // Цвет текста внутри подсказки
background: #E9DCE8; // Фон подсказки
/*Этот код будет работать только в браузерах с поддержкой css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
/* выполнение градиента webkit здесь стрелочка */
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#E9DCE8));
background:-moz-linear-gradient(top, #f9d835, #E9DCE8);
background:-o-linear-gradient(top, #f9d835, #E9DCE8);
}
.podskazka.left {
margin-left:50px; //отступ стрелочки от облака
background:#E9DCE8; // Фон
}
.podskazka:after {
content:""; //Здесь можно вставить текст
display:block;
position:absolute;
bottom:-15px;
left:50px;
width:0;
height:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#E9DCE8 transparent;
}
.podskazka.left:after {
top:14px; // Позиция стрелочки по оси Y
left:-50px; // Позиция стрелочки по оси X
bottom:auto;
border-width:10px 50px 10px 0;
border-color:transparent #E9DCE8;
}
Это сам код css и подключаем его следующим способом
Я думаю подсказок в коде css достаточно для разбора. Можно поэксперементировать и поменять некоторые значения подобрать цвет под свой дизайн. Давайте теперь усложним нашу разработку и создадим подсказку с бордюром. Как она выглядит можно посмотреть ниже.
Понравилось? Давайте посмотрим код реализации данного на css3 смотрим код ниже
Код CSS3
.podskazka_border {
position:relative;
padding:15px;
margin:1em 0 3em;
border:5px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.podskazka_border.left {
margin-left:30px;
}
.podskazka_border:before {
content:"";
display:block;
position:absolute;
bottom:-40px;
left:40px;
width:0;
height:0;
border:20px solid transparent;
border-top-color:#5a8f00;
}
.podskazka_border:after {
content:"";
display:block;
position:absolute;
bottom:-26px;
left:47px;
width:0;
height:0;
border:13px solid transparent;
border-top-color:#fff;
}
.podskazka_border.left:before {
top:10px;
left:-30px;
bottom:auto;
border-width:15px 30px 15px 0;
border-style:solid;
border-color:transparent #5a8f00;
}
.podskazka_border.left:after {
top:16px;
left:-21px;
bottom:auto;
border-width:9px 21px 9px 0;
border-style:solid;
border-color:transparent #fff;
}
Вот такой вод код, да не маленький но зато результат на литцо. Подключаем как и в первом способе или можно прописать и для параграфа такой стиль, я выбрал для разбора примеров на теге (SPAN). В примерах выше мы сделали 2 примера но думаю давайте разберем ещё два на сегодня. Но два очень инетресных на мой взгляд. И так смотрим пример реализации подсказки на чистом css3
Уже посложней и как это реализовать на css давайте разберем ниже сам код. Подписывать код не буду. Но как это реализовано покажу смoтрим исходники.
Код CSS
.oval-thought {
display: block;
position:relative;
width:270px;
padding:50px 40px;
margin:1em auto 80px;
text-align:center;
color:#fff;
background:#075698;
-webkit-border-top-left-radius:220px 120px;
-webkit-border-top-right-radius:220px 120px;
-webkit-border-bottom-right-radius:220px 120px;
-webkit-border-bottom-left-radius:220px 120px;
-moz-border-radius:220px / 120px;
border-radius:220px / 120px;
background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
background:-moz-linear-gradient(top, #2e88c4, #075698);
background:-o-linear-gradient(top, #2e88c4, #075698);
}
.oval-thought p {font-size:1.25em;}
.oval-thought:before {
content:"";
position:absolute;
bottom:-20px;
left:50px;
width:30px;
height:30px;
background:#075698;
/* css3 */
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
}
.oval-thought:after {
content:"";
position:absolute;
bottom:-30px;
left:30px;
width:15px;
height:15px;
background:#075698;
/* css3 */
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
И давайте разберем еще один пример для реализации красивых подсказок на чистом css коде. Благодаря css3 теперь можно рисовать красивые вещи как на примере мы сейчас разбираем. И так давайте далее разберем еще один примерчик. Смотрим ниже
Так уже посложней и поинтересней на этом заканчиваем публикацию по тематике создания красивых подсказок. Просмотрим код css
Код CSS
.oval-thought-border {
width: 200px;
display: block;
position:relative;
padding:70px 30px;
margin:1em auto 80px;
border:10px solid #c81e2b;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-top-left-radius:240px 140px;
-webkit-border-top-right-radius:240px 140px;
-webkit-border-bottom-right-radius:240px 140px;
-webkit-border-bottom-left-radius:240px 140px;
-moz-border-radius:240px / 140px;
border-radius:240px / 140px;
}
.oval-thought-border:before {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
right:100px;
width:50px;
height:50px;
border:10px solid #c81e2b;
background:#fff;
/* css3 */
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
.oval-thought-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-60px;
right:50px;
width:25px;
height:25px;
border:10px solid #c81e2b;
background:#fff;
/* css3 */
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
}
Делать описание для каждого действия я не буду смотрите в справочнике по селекторам css я представил вам примеры реализации, можете поекспериментировать с данным кодом, поменять цвета размеры позиции и так далее. На этом до новых встреч. Пишите вопросы в комментариях.