Масштабируемая RSS иконка CSS3

В этом посте я расскажу как сделать RSS иконку используя только HTML и CSS3. И никаких изображений! С помощью небольшого javascript’а приводимый код будет работать и в InternetExplorer 7 и 8.

Работа кода проверена в Firefox, Opera, Safari, Chrome, IE 7 и 8 и, предположительно, все должно работать и в других браузерах.
Будем использовать вот такую html-разметку:

  1. <div class="rssWrp">
  2. 	<div class="secondLineWrp">
  3. 		<div class="secondLineOut">
  4. 			<div class="secondLineIn"></div>
  5. 		</div>
  6. 	</div>
  7. 	<div class="firstLineWrp">
  8. 		<div class="firstLineOut">
  9. 			<div class="firstLineIn"></div>
  10. 		</div>
  11. 	</div>
  12. 	<div class="rssDot"></div>
  13. </div>

Переходим к CSS. Будем использовать только одно из новых свойств CSS3 — border-radius. Однако, можно еще использовать тень.
Итак, вот код:

  1. /*размеры*/
  2. .rssWrp{
  3. 	width:10em;
  4. 	height:10em;
  5. 	-moz-border-radius:1em;
  6. 	-webkit-border-radius: 1em;
  7. 	border-radius: 1em;
  8. 	-moz-box-shadow: #000 4px 4px 10px;
  9. 	-webkit-box-shadow: #000 4px 4px 10px;
  10. 	box-shadow: #000 4px 4px 10px;
  11. }
  12. /*слой с фоном*/
  13. .rssWrp, .firstLineWrp, .firstLineIn, .secondLineWrp, .secondLineIn{
  14. 	background:#1D2626;
  15. }
  16. /*цвет кривых на иконке*/
  17. .rssDot, .firstLineOut, .secondLineOut{
  18. 	background:#FFF;
  19. }
  20. .rssWrp{
  21. 	position:relative;
  22. }
  23. .rssDot{
  24. 	-moz-border-radius:100em;
  25. 	-webkit-border-radius: 100em;
  26. 	border-radius: 100em;
  27. 	width:20%;
  28. 	height:20%;
  29. 	float:left;
  30. 	z-index:2;
  31. 	position:absolute;
  32. 	top:70%;
  33. 	left:10%;
  34. }
  35. .firstLineWrp{
  36. 	width:45%;
  37. 	height:45%;
  38. 	overflow:hidden;
  39. 	position:absolute;
  40. 	z-index:1;
  41. 	top:45%;
  42. 	left:10%;
  43. }
  44. .firstLineOut{
  45. 	-moz-border-radius:100em;
  46. 	-webkit-border-radius: 100em;
  47. 	border-radius: 100em;
  48. 	width:200%;
  49. 	height:200%;
  50. 	margin: 0 0 0 -100%;
  51. 	float:left;
  52. }
  53. .firstLineIn{
  54. 	-moz-border-radius:100em;
  55. 	-webkit-border-radius: 100em;
  56. 	border-radius: 100em;
  57. 	width:90%;
  58. 	height:90%;
  59. 	margin: 10% 0 0 0%;
  60. 	float:left;
  61. }
  62. .secondLineWrp{
  63. 	width:80%;
  64. 	height:80%;
  65. 	overflow:hidden;
  66. 	position:absolute;
  67. 	z-index:0;
  68. 	top:10%;
  69. 	left:10%;
  70. }
  71. .secondLineOut{
  72. 	-moz-border-radius:100em;
  73. 	-webkit-border-radius: 100em;
  74. 	border-radius: 100em;
  75. 	width:200%;
  76. 	height:200%;
  77. 	margin: 0 0 0 -100%;
  78. 	float:left;
  79. }
  80. .secondLineIn{
  81. 	-moz-border-radius:100em;
  82. 	-webkit-border-radius: 100em;
  83. 	border-radius: 100em;
  84. 	width:92%;
  85. 	height:92%;
  86. 	margin: 8% 0 0 0;
  87. 	float:left;
  88. }

И, в заключении, небольшой хак для работы кода в ие 7 и 8.
Для этого подключите DD_roundies и передайте ему некоторые настройки:

  1. <script src="DD_roundies_0.0.2a-min.js"></script>
  2. <script>
  3. 	DD_roundies.addRule('.rssWrp', '30%');
  4. 	DD_roundies.addRule('.rssDot', '100%');
  5. 	DD_roundies.addRule('.firstLineOut', '200%');
  6. 	DD_roundies.addRule('.firstLineIn', '200%');
  7. 	DD_roundies.addRule('.secondLineOut', '200%');
  8. 	DD_roundies.addRule('.secondLineIn', '200%');
  9. </script>

RSS иконка на CSS и HTML готова! Смотрим пример и делаем себе такие же 😉

Запись опубликована в рубрике HTML & CSS с метками , . Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">