/ Сайтостроение / Дизайн / Эффекты с border

Эффекты с border

HIT

06.12.2015

2046


  • Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 42

  • Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 43

  • Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 44

    Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 45

    Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 46

Делаем с border’ом разные интересные эффекты.

Стрелки CSS

Для дизайна элементов сайта часто нужны стрелки, сделать их можно средствами чистого CSS, псевдоклассами after и before.

Стрелка вверх
Стрелка вниз
Стрелка влево
Стрелка вправо
Стрелка вверх-влево
Стрелка вверх-вправо
Стрелка вниз-влево
Стрелка вниз-вправо

border по углам

Эффект достигается двумя псевдо-элементами:

#main-title:before {
    position: absolute;
    width: 50px;
    height: 50px;
    content: '';
    border-color: #414649;
    border-style: solid;
    left: 0px;
    top: 0px;
    border-width: 5px 0 0 5px;
}

#main-title:after {
    position: absolute;
    width: 50px;
    height: 50px;
    content: '';
    border-color: #414649;
    border-style: solid;
    right: 0px;
    bottom: 0px;
    border-width: 0 5px 5px 0;
}

У #main-title в свойствах должен быть указан position.

Если нужны рамки по четырем сторонам, нужно добавлять еще один слой, позаимствованное решение:

Вёрстка:

<div class="block">
  <div class="border"></div>
</div>

Стили:

.block {
  background: #066fff;
  width: 300px;
  height: 180px;
  margin: 20px auto;
  position: relative;
}

.border {position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

.block:before, .block:after, .border:before, .border:after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: '';
  border-color: #082346;
  border-style: solid;
}

.block:before {left: 0px; top: 0px; border-width: 9px 0 0 9px;}

.block:after {right: 0px; top: 0px; border-width: 9px 9px 0 0;}

.border:before {right: 0px; bottom: 0px; border-width: 0 9px 9px 0;}

.border:after {left: 0px; bottom: 0px; border-width: 0 0 9px 9px;}


Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 51
Стрелка вверх


Стрелка вниз


Стрелка влево


Стрелка вправо



Стрелка вверх-влево


Стрелка вверх-вправо


Стрелка вниз-влево


Стрелка вниз-вправо

Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 52
/* Стрелки CSS */

.arrow {
position:relative; 
background-color:yellowgreen; 
color:#fff; 
text-align: center; 
padding: 20px 2%; 
margin: 30px auto; 
width: 50%;
}

.arrow-bottom:after {
  content: '';
  position: absolute;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: yellowgreen;  
  border-bottom: 0;
  left: 48%;		
  }
	
.arrow-right:after {
  content: '';
  position: absolute;
  right: -10px;
  top: 17px;
  border: 10px solid transparent;
  border-left-color: yellowgreen;  
  border-right: 0;
  }
		
.arrow-top:before {
    content: '';
    position: absolute;
    top: -10px;
    border: 10px solid transparent;
    border-bottom-color: yellowgreen;
    border-top: 0;
    left: 48%;
  }
			
.arrow-left:before {
  content: '';
  position: absolute;
  left: -10px;
  top: 17px;
  border: 10px solid transparent;
  border-right-color: yellowgreen;  
  border-left: 0;
  }



.arrow-top-right:before {
  content: '';
  position: absolute;
  top: 0px;
  right: -10px;
  border: 10px solid transparent;
  border-top-color: yellowgreen;  
  border-bottom: 0;
  border-left: 0;				
  }
	
.arrow-top-left:before {
  content: '';
  position: absolute;
  top: 0px;
  left: -10px;
  border: 10px solid transparent;
  border-top-color: yellowgreen;  
  border-bottom: 0;
  border-right: 0;
  }
		
.arrow-bottom-left:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: -10px;
  border: 10px solid transparent;
  border-bottom-color: yellowgreen;  
  border-top: 0;
  border-right: 0;
  }
			
.arrow-bottom-right:after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: -10px;
  border: 10px solid transparent;
  border-bottom-color: yellowgreen;  
  border-top: 0;
  border-left: 0;
  }

Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 53

Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 54

Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 55
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Эффекты с border Эффекты с border
Тема StoreFront
Рекомендации для васТема StoreFrontOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.