Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.15.4.204
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Эффект загнутых уголков с использованием только CSS
Сообщение оставлено 23.02.2011 в 10:21:49 | Сообщение #1

Окончательный вид кода
Code
<div class="note">  
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>  
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>  
</div>  

<style>  
.note {  
   position:relative;  
   width:30%;  
   padding:1em 1.5em;  
   margin:2em auto;  
   color:#fff;  
   background:#97C02F;  
}  

.note:before {  
   content:"";  
   position:absolute;  
   top:0;  
   right:0;  
   border-width:0 16px 16px 0;  
   border-style:solid;  
   border-color:#fff #fff #658E15 #658E15;  
   background:#658E15;  
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);  
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);  
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);  
   display:block; width:0; /* Преодоление ограничений Firefox 3.0 */  
}  

.note.rounded {  
   -webkit-border-radius:5px;  
   -moz-border-radius:5px;  
   border-radius:5px;  
}  

.note.rounded:before {  
   border-width:8px;  
   border-color:#fff #fff transparent transparent;  
   -webkit-border-bottom-left-radius:5px;  
   -moz-border-radius:0 0 0 5px;  
   border-radius:0 0 0 5px;  
}  
</style>
 
 
   
Сообщение оставлено 23.02.2011 в 11:36:51 | Сообщение #2
хехе прикольно
 
 
   
Сообщение оставлено 23.02.2011 в 11:43:42 | Сообщение #3
Quote (arti)
хехе прикольно

Да прикольно
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика