Блог о программировании, электронике и рыбалке

Рубрика: HTML и CSS

font-size

Автоматическое изменение размера шрифта на CSS.

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

Столкнулся с небольшой проблемой – название сайта в мобильной версии не помещался в отведенное для него место. Сперва думал подобрать размер шрифта, но в этом случае на устройствах с большим разрешением оставалось бы много пустого места.

Читать полностью

  • keyboard_arrow_downCSS – поместить текст в одну строку
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/09/font-size.png
    • Обновлено: 12.09.2017
    • Комментариев: 1
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 8 votes, average: 5,00 out of 5
    Загрузка...
logo

image

Пошаговая инструкция по добавлению иконки к внешним ссылкам на сайте.

Решил поделиться своей старой заготовочкой на CSS для добавления иконки к внешним ссылкам на сайте.  В первую очередь это будет удобно вашим пользователям – они визуально смогут понять, что вы их хотите направить на сторонний ресурс. Лично я это считаю хорошим тоном, поэтому и стараюсь добавлять такую иконку во все проекты.

Читать полностью

  • keyboard_arrow_downДобавляем иконку к внешним ссылкам на сайте
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/08/image_thumb-1.png
    • Обновлено: 15.11.2017
    • Комментариев: 3
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 9 votes, average: 5,00 out of 5
    Загрузка...
logo

image Только сегодня узнал о возможности голосового ввода текста, которая реализуется с помощью атрибута x-webkit-speech у html тега <input>.

Это позволяет использовать функцию голосового ввода текста, которая пока поддерживается только в последних версиях браузера Google Chrome.

Читать полностью

  • keyboard_arrow_downРаспознавание голоса на сайте
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2013/04/image.png
    • Обновлено: 28.03.2017
    • Комментариев: 6
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 4 votes, average: 5,00 out of 5
    Загрузка...
logo

image Взял небольшой заказ на верстку сайта с последующим созданием на ее основе темы для WordPress. Макет был простой, но он был создан в Adobe Illustrator. Я получил от заказчика ТЗ, PDF файл с дизайном и PNG файл с пояснениями по разметке.

Читать полностью

  • keyboard_arrow_down“Пиксельная верстка” без заморочек
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/05/image_thumb-14.png
    • Обновлено: 21.12.2016
    • Комментариев: 2
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 6 votes, average: 5,00 out of 5
    Загрузка...
logo

imageСделал для себя такую вот "удобняшку" для просмотра шрифтов. Полезно будет подсматривать при верстке страничек.

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

Читать полностью

  • keyboard_arrow_downПримеры шрифтов
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/05/image_thumb2-5.png
    • Обновлено: 21.12.2016
    • Комментариев: 0
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 7 votes, average: 4,71 out of 5
    Загрузка...
logo

Это был просто шуточный эксперимент, который дал результаты. Все знают, что описание странички Google берет из meta тега description. Я, ради шутки, сделал текст жирным и в выдаче описание тоже стало жирным.

<meta name="description" content="<b>Как стать заметнее в поиске Google</b> - выделение описания жирным" />

Другие теги я добавлять не пробовал, так что с <h1> пробуйте сами.

Читать полностью

  • keyboard_arrow_down[Заблуждение] Как стать заметнее в поиске Google
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/kak-stat-zametnee-v-poiske-google.html
    • Обновлено: 22.12.2016
    • Комментариев: 3
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 3 votes, average: 5,00 out of 5
    Загрузка...
logo

Не буду долго говорить ни о чем – сразу покажу как.

Стандартный код YouTube для вставки на сайт:

<iframe width="640" height="510" 
src="http://www.youtube.com/embed/OfD5wK4awRI?rel=0" 
frameborder="0" allowfullscreen></iframe>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; } Читать полностью

  • keyboard_arrow_downВстроить видео с YouTube без логотипа YouTube
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/vstroit-video-s-youtube-bez-logotipa-youtube.html
    • Обновлено: 06.11.2015
    • Комментариев: 10
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 6 votes, average: 5,00 out of 5
    Загрузка...
logo

Решил сделать заметнее страничку своей программы Набор инструментов, а то после переезда со старого домена srchost.net на этот, многие пользователи потеряли возможность обновляться. В причины вдаваться не буду – произошло обычное недопонимание. Из-за этого потерял много пользователей программы – печально.

А теперь по делу. Решил сделать фиксированную ссылку на страничку программы – результат можете созерцать в правой части блога. Смотрится прикольно. Использовать можно по разному – например картинку повесить или баннер.

Читать полностью

  • keyboard_arrow_downЗакрепленная надпись
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/zakreplennaya-nadpis.html
    • Обновлено: 21.12.2016
    • Комментариев: 0
    • Просмотров:
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 3 votes, average: 5,00 out of 5
    Загрузка...
logo
arrow_upward