Главная » Языки программирования

Логотипы при помощи css

На чтение 11 мин
Содержание
  1. 33 Pure CSS Logos
  2. Author
  3. Links
  4. Made with
  5. About a code
  6. Avengers Logo
  7. Author
  8. Links
  9. Made with
  10. About a code
  11. Google Logo With Single DIV
  12. Author
  13. Links
  14. Made with
  15. About a code
  16. Pure CSS Twitch Logo
  17. Author
  18. Links
  19. Made with
  20. About a code
  21. CSS-Tricks Logo in Pure CSS
  22. Author
  23. Links
  24. Made with
  25. About a code
  26. Gmail Single Element CSS
  27. Author
  28. Links
  29. Made with
  30. About a code
  31. 1 Element Heading with CSS Logo
  32. Author
  33. Links
  34. Made with
  35. About a code
  36. Square Logo Design
  37. Author
  38. Links
  39. Made with
  40. About a code
  41. Moon Skincare
  42. Author
  43. Links
  44. Made with
  45. About a code
  46. Single Div Logo
  47. Author
  48. Links
  49. Made with
  50. About a code
  51. Netflix Logo Single Div
  52. Author
  53. Links
  54. Made with
  55. About a code
  56. Firebase Logo
  57. Author
  58. Links
  59. Made with
  60. About a code
  61. Gitlab Logo
  62. Author
  63. Links
  64. Made with
  65. About a code
  66. Git Logo In HTML/CSS
  67. Author
  68. Links
  69. Made with
  70. About a code
  71. Netflix Logo
  72. Author
  73. Links
  74. Made with
  75. About a code
  76. ‘His Dark Materials’ TV Series Logo
  77. Author
  78. Links
  79. Made with
  80. About a code
  81. React Logo
  82. Author
  83. Links
  84. Made with
  85. About the code
  86. Figma Logo
  87. Author
  88. Links
  89. Made with
  90. About the code
  91. Switch Logo
  92. Author
  93. Links
  94. Made with
  95. About the code
  96. Logo Loader
  97. Author
  98. Links
  99. Made with
  100. About the code
  101. Logo
  102. Author
  103. Links
  104. Made with
  105. About the code
  106. Google Logo
  107. Author
  108. Links
  109. Made with
  110. About the code
  111. Logo Animation
  112. Author
  113. Links
  114. Made with
  115. About the code
  116. Logo Animation
  117. Author
  118. Links
  119. Made with
  120. About the code
  121. Logo — Animated
  122. Author
  123. Links
  124. Made with
  125. About the code
  126. Snowing Logo
  127. Author
  128. Links
  129. Made with
  130. About the code
  131. Pyramid Logo Hover Animation
  132. Author
  133. Links
  134. Made with
  135. About the code
  136. Northerli Logo
  137. Author
  138. Links
  139. Made with
  140. About the code
  141. Webandcrafts Logo — Pure CSS
  142. Author
  143. Links
  144. Made with
  145. About the code
  146. Logo MDN CSS
  147. Author
  148. Links
  149. Made with
  150. About the code
  151. Shop Talk Logo Made in CSS
  152. Author
  153. Links
  154. Made with
  155. About the code
  156. Codepen.io Logo
  157. Author
  158. Links
  159. Made with
  160. About the code
  161. Brackets Logo
  162. Author
  163. Логотипы при помощи css
  164. Как выбрать хороший хостинг для своего сайта?
  165. Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов
  166. Разработка веб-сайтов с помощью онлайн платформы Wrike
  167. Почему WordPress лучше чем Joomla ?
  168. Про шаблоны WordPress
  169. Анимация набора текста на jQuery
  170. Самые первые настройки после установки движка WordPress
  171. Дизайн логотипа на CSS3
  172. Основные CSS3 свойства
  173. Разработка логотипа
  174. Окончательный HTML и CSS

33 Pure CSS Logos

Collection of hand-picked free HTML and pure CSS logo code examples. Update of January 2020 collection. 10 new items.

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Google Logo With Single DIV

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS-Tricks Logo in Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Gmail Single Element CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Square Logo Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Moon Skincare

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Читайте также:  Java regex any symbol

Author

Made with

About a code

Netflix Logo Single Div

One div Netflix logo. CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Git Logo In HTML/CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

‘His Dark Materials’ TV series logo with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Figma logo in HTML and CSS flexbox .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Nintendo Switch logo in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Logo Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Experimenting with animating independent SVG elements with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

A configurable bouncing Google logo.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Logo Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Logo Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Logo — Animated

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Just a proof of concept while ideas being tossed around.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pyramid Logo Hover Animation

Tried to make a 3D logo hover effect with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Animated SVG logo for Northerli. Hover for motion.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Webandcrafts Logo — Pure CSS

WebandCrafts logo designed with border-radius , box-shadow and CSS transforms. Click the logo for exploded view.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Logo MDN CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Shop Talk Logo Made in CSS

A CSS only version of the Shop Talk logo complete with a data URI texture. Added some JS, just to show the difference when scaling up.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Single element Codepen.io logo. Pure CSS using box-shadow and CSS3 transforms with just a hint of CSS3 filtering to help with anti-aliasing.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Single element Brackets logo.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

Логотипы при помощи css

*

Частная коллекция качественных материалов для тех, кто делает сайты

  • Creativo.one2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
Читайте также:  File is used by another process java

В этом разделе перечислены все уроки без разделения по рубрикам.

Выбирайте тот урок, который интересует Вас больше всего на данный момент. К каждому уроку Вы можете оставить свой комментарий, а также проголосовать.

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Создан: 15 Апреля 2020 Просмотров: 10573 Комментариев: 0

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Создан: 23 Ноября 2018 Просмотров: 18126 Комментариев: 0

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Создан: 26 Августа 2017 Просмотров: 28566 Комментариев: 0

Про шаблоны WordPress

После установки и настройки движка нам нужно поработать с дизайном нашего сайта. Это довольно долгая тема, но мы постараемся рассказать всё кратко и ясно.

Создан: 3 Августа 2017 Просмотров: 26525 Комментариев: 0

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Самые первые настройки после установки движка WordPress

Сегодня мы вам расскажем какие первые настройки нужно сделать после установки движка WordPress. Этот урок будет очень полезен для новичков.

Источник

Дизайн логотипа на CSS3

Ранее мы использовали для графического дизайна программное обеспечение, например, Photoshop для разработки логотипов и иконок. Но теперь мы можем спроектировать почти все, используя возможности CSS3. Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта.

Сегодня обсудим, как создать логотип, используя основные свойства CSS3.

Превъю поста

В этом уроке разберем логотип ниже. Также, заметим что CSS3 свойства поддерживаются не всеми браузерами. В настоящее время все основные браузеры, такие как Chrome, Safari и Firefox поддерживают. Для лучшего результата, проверьте демо в Chrome или Safari (последних версий).

Исходник

Основные CSS3 свойства

Для разработки этого логотипа использовались два основных свойства CSS3.

1. border-radius:
Наверно вы заметили использование закругленных углов для головы, крыльев и некоторых других мест. Для закругления углов использовалось CSS3 свойство border-radius.

border-radius

Это свойство будет принимать два значения. Первое значение будет горизонтальный радиус и второе значение будет вертикальным радиусом.

2. transform:
Это CSS3 свойство будет принимать много значений, таких как наклон, поворот, перевод и т.д., но нам для наклона достаточно воспользоваться одним значением — наклон. Как вы наверно уже заметили, нижний левый и нижний правый крылья поворачиваются. Для этого использовалось свойство transform: rotate(x degrees).

transform

Разработка логотипа

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

Структура

Проектирование головы. Для разработки головы использовались контейнеры. Ниже приводится HTML и CSS для головы. Использовалось свойство border-radius, чтобы придать голове изогнутую форму.

#logo .head < position: relative; height: 40px; background: #bdd73c; border-radius:60px 60px 0 0 / 50px 50px 0 0; border: 2px solid #6fb74d; >.head .ant < width: 2px; height: 25px; background: #bdd73c; border: 2px solid #6fb74d; position: absolute; border-radius: 3px 3px 0 0; border-bottom: 2px solid #bdd73c; >.head .ant_left < top: -22px; left: 15px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); >.head .ant_right < top: -22px; left: 73px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); >.lefteye, .righteye < position: absolute; background: #fff; border: 2px solid #6fb74d; width: 10px; height: 10px; top: 15px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; >.lefteye < left: 15px; >.righteye

Голова

Проектирование тела. Для проектирования тела использовался следующий HTML и CSS.

#logo .body < overflow: hidden; border: 2px solid #6fb74d; margin-top: 4px; border-radius: 0 0 60px 60px; >#logo .body .strip < height: 18px; background: #bdd73c; >#logo .body .brown

тело выглядеть следующим образом

Читайте также:  Sorting tables in python

тело

Проектирование крыльев. Для проектирования крыльев использовалось свойство transform: rotate().

.left_wings .wing1, .left_wings .wing2 < width: 100px; background: #e2e2e3; border: 2px solid #d1d0d1; border-radius: 16px 0 0 16px; position: absolute; >.left_wings .wing1 < height: 35px; top: 48px; left: 0; z-index: -1; opacity: .8; >.left_wings .wing2 < top: 80px; left: 20px; z-index: -1; opacity: .6; height: 25px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >.right_wings .wing1, .right_wings .wing2 < width: 100px; background: #e2e2e3; border: 2px solid #d1d0d1; border-radius: 0 16px 16px 0; position: absolute; >.right_wings .wing1 < height: 35px; top: 48px; left: 200px; z-index: -1; opacity: .8; >.right_wings .wing2

крылья

Проектирование хвоста. Ниже приводится HTML и CSS для хвостовой части.

.tail < width: 16px; height: 40px; left: 143px; margin-top: -1px; position: absolute; background: #6fb74d; >.tail_left < width: 8px; height: 40px; background: #fff; float: left; border-top-right-radius:16px 40px; >.tail_right

Хвост

Окончательный HTML и CSS

body < width: 100%; margin: 0; padding: 0; >#logo_container < width: 300px; height: 200px; margin: 0 auto; position: relative; margin-top: 100px; >#logo < width: 100px; margin-left: 100px; >#logo .head < position: relative; height: 40px; background: #bdd73c; border-radius:60px 60px 0 0 / 50px 50px 0 0; border: 2px solid #6fb74d; >.head .ant < width: 2px; height: 25px; background: #bdd73c; border: 2px solid #6fb74d; position: absolute; border-radius: 3px 3px 0 0; border-bottom: 2px solid #bdd73c; >.head .ant_left < top: -22px; left: 15px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); >.head .ant_right < top: -22px; left: 73px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); >.lefteye, .righteye < position: absolute; background: #fff; border: 2px solid #6fb74d; width: 10px; height: 10px; top: 15px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; >.lefteye < left: 15px; >.righteye < left: 65px; >#logo .body < overflow: hidden; border: 2px solid #6fb74d; margin-top: 4px; border-radius: 0 0 60px 60px; >#logo .body .strip < height: 18px; background: #bdd73c; >#logo .body .brown < height: 22px; background: #5a4a42; >.left_wings .wing1, .left_wings .wing2 < width: 100px; background: #e2e2e3; border: 2px solid #d1d0d1; border-radius: 16px 0 0 16px; position: absolute; >.left_wings .wing1 < height: 35px; top: 48px; left: 0; z-index: -1; opacity: .8; >.left_wings .wing2 < top: 80px; left: 20px; z-index: -1; opacity: .6; height: 25px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >.right_wings .wing1, .right_wings .wing2 < width: 100px; background: #e2e2e3; border: 2px solid #d1d0d1; border-radius: 0 16px 16px 0; position: absolute; >.right_wings .wing1 < height: 35px; top: 48px; left: 200px; z-index: -1; opacity: .8; >.right_wings .wing2 < top: 80px; left: 175px; z-index: -1; opacity: .6; height: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); >.tail < width: 16px; height: 40px; left: 143px; margin-top: -1px; position: absolute; background: #6fb74d; >.tail_left < width: 8px; height: 40px; background: #fff; float: left; border-top-right-radius:16px 40px; >.tail_right

Оригинал: CSS3 Logo Design by Srinivas Tamada

Источник

Оцените статью
© 2023 Программирование