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

Рубрика: HTML и CSS

шрифт размер font size CSS  primery na html i css

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

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

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

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

  • vertical_align_bottomCSS – поместить текст в одну строку
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/09/font-size.png
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 12.09.2017
    • Комментариев: 1
    • Просмотров:
logo

ссылки Иконка внешняя CSS  primery na html i css

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

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

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

  • vertical_align_bottomДобавляем иконку к внешним ссылкам на сайте
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/08/image_thumb-1.png
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 24.08.2017
    • Комментариев: 1
    • Просмотров:
logo

распознавание голоса голосовой ввод x webkit speech HTML google Chrome  primery na html i css  Только сегодня узнал о возможности голосового ввода текста, которая реализуется с помощью атрибута x-webkit-speech у html тега <input>.

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

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

logo

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

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

  • vertical_align_bottom“Пиксельная верстка” без заморочек
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/05/image_thumb-14.png
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 21.12.2016
    • Комментариев: 2
    • Просмотров:
logo

шрифт font  primery na html i css  Сделал для себя такую вот "удобняшку" для просмотра шрифтов. Полезно будет подсматривать при верстке страничек.

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

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

  • vertical_align_bottomПримеры шрифтов
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/05/image_thumb2-5.png
    • Рубрика: HTML и CSS
    • Метки: ,
    • Обновлено: 21.12.2016
    • Комментариев: 0
    • Просмотров:
logo

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

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

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

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

  • vertical_align_bottom[Заблуждение] Как стать заметнее в поиске Google
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/kak-stat-zametnee-v-poiske-google.html
    • Рубрика: HTML и CSS
    • Метки: ,
    • Обновлено: 22.12.2016
    • Комментариев: 3
    • Просмотров:
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; } Читать полностью

  • vertical_align_bottomВстроить видео с YouTube без логотипа YouTube
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/vstroit-video-s-youtube-bez-logotipa-youtube.html
    • Рубрика: HTML и CSS
    • Метки: ,
    • Обновлено: 06.11.2015
    • Комментариев: 10
    • Просмотров:
logo

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

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

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

  • vertical_align_bottomЗакрепленная надпись
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/zakreplennaya-nadpis.html
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 21.12.2016
    • Комментариев: 0
    • Просмотров:
logo
vertical_align_top
banner