Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу
По умолчанию экспорт из Corel Draw! в SVG формат даже при галочке «Только выделенные объекты» дает в результате картинку такого размера, как наш рабочий лист. То есть картинка будет на A4, если рабочий лист такого формата. Приходится делать отдельный лист точно такого размера в пикселах, какой нам нужен, делать наш логотип именно такого размера, центровать, а потом уже экспортировать.
А теперь вставляем на страницу
При вставке на страницу тега мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG — — показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.
MIME-Type
Оказывается, дело в том, что мой сервер (IBM Lotus Domino) не умеет корректно отдавать MIME-Type для SVG. И файл, лежащий в File Resources базы, не может быть корректно отдан! Прописываю строчку image/svg+xml в свойствах ресурса. И, о чудо! – все браузеры (кроме IE8) показывают все три варианта (img, embed, object) вставки картинки. Отлично, это меня устраивает, «костыли» для IE будут в gif. Еще раз удивляюсь тому факту, что даже без mime-type на планшетах все показывалось правильно.
Взглянем на логотип поближе
А теперь я пробую увеличить масштаб страницы, чтобы посмотреть на свой логотип, а, точнее, сравнить, как отображается один и тот же файл, вставленный тремя разными тегами. Оказывается, при увеличении масштаба страницы в Firefox, контур того варианта, который был вставлен тегом IMG, то расплывается, то снова становится четким.
А как насчет защиты от несанкционированного копирования и воспроизведения?
Я не претендую на звание специалиста в этой области, наоборот, хотела бы задать вопрос. Просто не нашла ничьего мнения по данному вопросу. У SVG формата нет watermarks, равно как и других защитных атрибутов.
Обычно фирмы владеют файлами в векторах как исходниками. Делая брендбук, дизайн-студии отдают вектор, а везде используется уже растр.
А SVG, вообще-то, текстовый формат, точнее, XML-ный. И, будучи вставленным в любую программу для паблишинга, он будет воспроизведен без потери качества. Это надо учитывать, т.к. редактировать ваши файлы будет гораздо проще и, возможно, потом будет нечем доказать, что вы являетесь законным правообладателем.
Create a Logo with CSS
Today, we’re creating a simple logo with CSS. Since CSS3 became generally available in all browsers a few years ago, we can use a lot more builtin browser features where before Photoshop became necessary (I just say rounded corners!). Creating a simple logo with CSS is one of these situations where we can leverage recent CSS features such as transform and animation to create something visually appealing!
Create a div container
Create a <div> container that will contain our logo
Create a CSS Class
Create a CSS class
We’re assigning a new font-size to verify that the class gets applied.
Pick colors and configure display settings
If you don’t already have a color scheme, go ahead and create one. I use https://coolors.co for that. With the new color scheme in place, let’s define a background and text color:
After plugging in the colors you will notice that the <div> expands over the site’s full width.
This happens because <div> is a block element. It automatically expands over the full page width.
By default, a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
In our case, we’d like the <div> to occupy only as much space as it really needs. We can accomplish this by changing its display setting to inline-block .
What you can see now is that its width has changed so that it only is as long as its content.
With display we can change an HTML element’s way of rendering itself. The setting block ensures that it takes up the full width of its parent container, where inline on the other hand works like this:
The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space
https://developer.mozilla.org/en-US/docs/Web/CSS/display
inline-block is a combination of inline and block :
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Set a new font
It’s time for a different font. Right now the logo text is rendered using the browser’s default font. We’d like to customize this a bit.
Instead of the default font, we now use Courier. Add font-family: Courier to the class.
Margin and Padding
The next step is to add some margin and padding to improve optics. Add margin: 15px; and padding: 15px; to the class:
Margin defines the space between the element’s outer borders and its parent conainer, where with padding we can control the space between the element’s inner border and its children.
Time for Transformations
Did you know that CSS can also animate and transform your HTML elements? Let’s get into it.
First, we’ll do some rotation and skew.
Add transform: rotate(-10deg) skew(-17deg); to the class:
transform accepts a bunch of different values. In our case, we’re configuring a -10 degree rotation, followed by a skew. The skew ensures that the text looks a bit more natural. The logo now looks like this:
Animate!
In the last step we’re adding some animation as well. It’s possible to animate a lot of different properties. In our case, we’re focusing on the background color.
We start with defining keyframes .
These define the different states of the animation. We specify a color at 0%, 50% and 100% to ensure a gradient. Once the keyframes are in place, it’s time to use them on our logo class. We add animation: pulse 5s infinite; style for that:
Let’s break down the animation style. We specify that we’d like to use the pulse keyframes in a five second interval. Also, the animation is supposed to run indefinitely. The browser takes care of everything else.
And with this we’re done! You just created your first logo with CSS and animations!
How do I add my logo to my website using html
i currently have a website set up but i cant quite figure out how to add a logo to the top left of my website. I am not talking about a favicon if you are wondering im talking about a logo that is on the website itself just like how stack overflow has a logo on the website with the words stack overflow next to it. im pretty new to coding though so its probably an ammeture mistake but i just cant get my logo to show up on my website. Here is my current code that I have in notepad+
UPDATE: fixed my code and uploaded it to the internet using filezilla but for some reason now my logo wont show up, its just that little torn piece of paper that shows up in place of the image showing that the image wont work and i dont know how to make my logo show up. Another thing I fixed my code on my laptop then put it on a usb then went over to my desktop and used it to use filezilla to upload my site to the internet.
Flex, логотип сайта. Form и input в HTML. Класс container. Иконочный шрифт
Новые участки кода index.html находятся между <!— New —><!— End —>, а в style.css — между /*New*/ /*END*/. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, Вы увидите какой результат будет по итогу урока.
index.html:
style.css:
Начало урока. Разбор файла index.html
Разбор снова начнем с файла index.html. Первое, что здесь добавилось — это строка <link rel=»stylesheet» type=»text/css» href=»https://imdiz.ru/files/store/css/font-awesome.min.css»> . Про нее я расскажу позже. А сейчас обратите внимание на второй добавленный блок.
Div с классом container в HTML
Этот новый блок полностью помещен в <div ></div> . Это вспомогательный контейнер, который Вы в будущем сможете увидеть на многих сайтах. Благодаря этому контейнеру мы разместим все его содержимое по центру сайта. Посмотрите на картинку:
То есть, расстояние слева и справа от содержимого одинаковое.
В этот контейнер помещен логотип, строка поиска и корзина.
Как контейнер разместился по центру, будет рассказано при разборе style.css ниже.
Логотип сайта. Теги <a> и <img> в HTML
Дальше, на что нужно обратить внимание в index.html это логотип. Логотип сайта обычно представляет собой ссылку, в которой находится картинка:
Тег <a></a> в HTML служит для добавления ссылки. Тег <img> служит для добавления картинки.
Таким образом, находясь на любой странице сайта, пользователь сможет нажать на логотип, и попасть на главную страницу сайта.
И еще раз посмотрите как добавляется логотип в верстку: в тег <a></a> помещается тег <img>.
Теперь подробнее про ссылки. Для добавления на сайт ссылки в HTML есть тег <a></a> . Адрес ссылки указывается в атрибуте href . В нашем случае href=»/», и нажав на логотип, Вы просто обновите страницу. А если Вы укажете, например, href=»https://imdiz.ru», то при нажатии на лого перейдете на сайт https://imdiz.ru.
Для ссылки я задал class=»logo» , так как это ссылка для логотипа. Еще у тега a есть атрибут title , его значение на сайте (в браузере) Вы увидите, если просто наведете курсор мыши на логотип.
В HTML есть тег для размещения картинки на сайте, это тег — <img> . Сама картинка должна где-то находится: на Вашем компьютере или в Интернете. А чтобы тег img ее отобразил, он должен знать адрес, где находится картинка. Адрес картинки указывается в атрибуте src . Сейчас адрес картинки выглядит так — src=»https://imdiz.ru/files/store/img/logo.png», то есть картинка находится по этому адресу и отображается с него.
У img есть обязательный атрибут alt . Если вдруг сама картинка не будет отображаться на сайте, то отобразится текст из атрибута alt (alt от английского alternative — альтернатива).
Поисковая форма на сайте. Теги <form>, <input> и <button>
Вы наверняка пользовались формой поиска в каком-нибудь интернет-магазине. Сейчас Вы увидите, как она делается. Код очень простой:
На реальном действующем интернет-магазине благодаря тегу <form></form> то, что Вы пишете в поисковой строке, «улетает» на сервер (хостинг). И уже на сервере происходит сам поиск. Ну, и, если что-то нашлось, то Вы увидите результат поиска. Через тег <form> «улетают» и другие данные на сервер. Например, если регистрируетесь и вводите имя, телефон, пароль и т.д.
На этапе верстки поисковая форма еще не будет работать. Ее будет доделывать программист уже после верстки.
Само поле для ввода данных создается с помощью тега input (input с английского — «ввод данных»). У тега есть несколько атрибутов:
- type — тип данного поля. В нашем случае поле текстовое, поэтому type=»text» ;
- name — этот атрибут будет нужен, на этапе программирования, но я его сейчас тоже указал, чтобы Вы о нем знали;
- value — это значение, которое будет стоять в поле по умолчанию;
- placeholder — это бледный текст, который нужен, чтобы просто подсказать пользователю, для чего предназначено данное поле.
Для того, чтобы поиск выполнился, после ввода данных нужно нажать ENTER, либо кликнуть мышью на кнопку поиска. Кнопка верстается тегом <button></button> (button с английского — «кнопка»). С этим тегом все просто — то, что Вы укажете внутри этого тега, будет отображено на кнопке. Можно просто написать «КНОПКА», а можно вставить иконку, что я и сделал. Об этих иконках Вы уже узнаете в этом уроке уже скоро.
Здесь еще добавлю, что форму поиска я поместил в <div > . Это, чтобы разместить форму поиска и корзину в правой части сайта.
Иконочный шрифт FontAwesome
Как Вы могли видеть в браузере кнопка поиска представляет собой лупу. Эта лупа задана не картинкой, а иконочным шрифтом:
Чтобы установить иконочный шрифт нужно сделать 3 действия:
- скачать сам шрифт (файлы шрифта);
- скачать CSS-файл, отвечающий за иконочный шрифт;
- и подключить шрифт в файле index.html.
Перед тем, как скачать шрифт, создайте рядом с Вашим index.html папку fonts. В эту папку и нужно будет скачать шрифт. Скачать его можно по этой ссылке imdiz.ru/files/font-awesome-4.7.0.zip. Скачайте этот архив в папку fonts и распакуйте в ней же.
Теперь Вам нужен соответствующий CSS-файл. Скачайте его по этой ссылке imdiz.ru/files/font-awesome.min.zip. Распакуйте его в Вашу папку css. В архиве всего 1 файл — font-awesome.min.css. Подчеркиваю, этот файл нужно положить в папку css.
Ну, а теперь просто подключите иконочный шрифт строкой в index.html <link rel=»stylesheet» type=»text/css» href=»css/font-awesome.min.css»> . Ставьте эту строку перед подключением style.css следующим образом:
Таким образом, для подключения иконочного шрифта нужно выполнить 3 шага:
- Поместить файлы шрифта в папку fonts.
- Поместить файл font-awesome.min.css в папку css.
- В файле index.html подключить шрифт до подключения файла style.css.
Иконочный шрифт используется для того, чтобы сделать сайт легче. Если каждую иконку делать картинкой, и таких иконок будет много, то сайт будет чуточку тяжелее. Из-за этого сайт будет чуть дольше загружаться. А сейчас скорость загрузки сайта очень важный фактор.
Иконочные шрифты существуют разные. Я использовал FontAwesome. В Вашей работе верстальщиком будет зависеть от дизайнера, какой иконочный шрифт используется и используется ли вообще. Если дизайнер применял иконочный шрифт в дизайне, то и Вы будете применять в верстке этот же иконочный шрифт.
Корзина в шапке интернет-магазина. Тег <span>
Вся корзина помещена во вспомогательный блок <div class = «cart-informer» ></div> . А затем всё помещено в button . Все элементы корзины сверстаны с помощью тега span . Иконки заданы иконочным шрифтом.
Тег span представляет собой строку (span с английского — «интервал»). Span часто используют, чтобы стилизовать часть текста или всего одну букву. Например, чтобы какое-то слово выделить определенным цветом. У Вас в корзине span будет играть другую роль, о которой я расскажу ниже.
Что представляет собой корзина на данном сайте. Сперва указано количество товаров, помещенных в корзину. Затем идет иконка самой корзины. Затем общая стоимость товаров, помещенных в корзину. Ну, и справа стрелочка вниз — она показывает, что при наведении на корзину, внизу будет что-то появляться. В реальных интернет-магазинах при наведении на такую стрелочку обычно появляется небольшое окно, в котором показаны товары, добавленные в корзину.
Разбор файла style.css
Flex в верстке. Внутренние и внешние отступы
До этого я разбирал только index.html. Пришло время рассмотреть style.css и разобраться со стилями.
Первое новшество в style.css — это класс .container . Как я уже писал, это вспомогательный блок. Итак, какие стили используются для этого класса:
- width: 1140px; — ширина контейнера 1140px (пикселей). Обратите внимание, что в записи 1140px нет ни одного пробела!
- display: flex; — у каждого HTML-элемента есть свой display, даже если вы его не прописали. Основные значения: block, inline, inline-block, flex. Flex — это очень крутое значение. Оно появилось всего несколько лет назад. Flex с английского переводится, как «гибкий». Благодаря flex теперь все элементы, помещенные непосредственно в .container , будут располагаться слева направо, и будут «пытаться» занять всю ширину .container ;
- align-items: center; — применяется только к flex-элементам. Теперь все элементы, помещенные непосредственно в .container , будут находится на одном уровне. Обратите внимание, сейчас на сайте логотип, поиск и корзина находятся на одной горизонтальной прямой;
- padding — это внутренние отступы элемента. Пока не задумывайтесь, в чем разница межу внутренними и внешними отступами. Можно указать с какой стороны нужен отступ: слева, справа, сверху, снизу. Например, можно писать padding-left;
- margin — это внешние отступы элемента. Пока не задумывайтесь, в чем разница межу внутренними и внешними отступами. Можно указать с какой стороны нужен отступ: слева, справа, сверху, снизу. Например, можно писать margin-left. Может быть значение auto . Если для лева и право указать auto , то блок разместится ровно по центру ( margin-left: auto; margin-right: auto;).
Flex — расположение элемента справа
Чтобы расположить блок .header-right справа, я задал для него margin-left: auto; . Это работает для блоков, чей родительский блок имеет display: flex; . Блок .header-right разместится справа, потому что его родительский блок .container имеет display: flex; .
Свойства border, color, font-size, background в CSS. RGBA в CSS
Объясню, как сделана форма поиска.
Если убрать все стили для формы, для поисковой строки, для кнопки, то вся форма будет выглядеть вот так:
Как видите, внешний вид уже совсем не такой привлекательный. Строка поиска белая, надпись «Search» серая, кнопка уже совсем не в виде лупы. Так теги input и button выглядят, если им не прописать никаких CSS-стилей.
Итак, что я сделал, чтобы стилизовать поисковую форму. Для класса .search-form вы можете видеть следующие стили:
- margin: 0 auto; — про margin вы уже знаете, а такая запись означает, что отступы сверху и снизу равны 0, а слева и справа — auto;
- height: 50px; — высота всей поисковой формы равна 50 пикселей;
- border: 1px solid rgba(255,255,255,.2); — граница толщиной в 1 пиксель. Здесь solid означает, что граница в виде непрерывистой линии. Еще есть dotted и dashed — в виде точек и черточек соответственно. RGBA задает цвет. В скобках первые 3 числа задают цвет в формате RGB, а последнее число задает прозрачность (1 — это вообще не прозрачный, а 0 — это полностью прозрачный).
Граница будет только у самой формы (тег <form></form>), а у поискового поля и кнопки границы не будет. Я убрал границы вообще для всех тегов input и button на сайте.
Стили для поля ввода (поисковой строки) input :
- outline: 0; — если не задать это свойство, то у input при клике на него будет появляться голубая граница;
- background : none ; — так отменяется задний фон. По умолчанию, у input белый задний фон;
Перечисленные стили будут работать вообще для всех тегов input, встречающихся на сайте. А конкретно для поисковой строки я задал класс .search-input и задал стили, среди которых:
- color: #fff; — задает цвет текста. В данном случае текст будет белый;
- font-size: 12px; — задает размер шрифта 12 пикселей.
Осталось покрасить placeholder в белый цвет. Это делается необычным образом. Вот весь код для стилизации placeholder:
Так placeholder настраивается для различных браузеров: webkit — это Chrome и Safari, moz — это Mozilla Firefox, ms — это Internet Explorer от Microsoft.
Для стилизации кнопки я так же, как для input убрал для button свойства outline, border и background. И здесь остается одно еще неизвестное вам свойство — cursor . Свойство cursor задает вид курсора мыши при наведении на элемент. Конкретно cursor: pointer; указывает, что курсор должен выглядеть так же, как при наведении на ссылку.
Отрицательные отступы, justify-content, background-color, жирный шрифт в CSS
В этом уроке осталось разобрать стили для информера корзины. Еще неизвестных вам стилей там очень мало.
Смотрите класс .cart-informer__count :
- background-color: #fff; — вы уже знаете про свойство background. Свойство background обобщенный вариант, им можно задать и цвет, и фоновое изображение. А background-color задает только цвет;
- margin-right: -4px; — про margin вы уже тоже знаете, но я не писал, что можно задавать отрицательный отступ. То есть в данном случае элемент сместится вправо на 4 пикселя;
- justify-content: center; — относится только к flex-элементам, оно выравнивает дочерние элементы по центру. Например, если его сейчас убрать, то цифра 1 сместится влево.
Классы .cart-informer__i, .cart-informer__value :
- font-weight: 700; — задает жирность шрифта. Значение 900 задает самый жирный шрифт, можно еще написать bold (font-weight: bold;). Значение normal задает нормальный шрифт.
Комментарии в CSS
В конце предыдущего урока я рассказал про комментарии в HTML. В CSS тоже можно комментировать участки кода, и нужно это для тех же целей, что и в HTML. Можно оставлять в коде какие-то подсказки для себя и комментировать их, чтобы они не ломали код. Также, можно комментировать участки CSS-кода, чтобы не удалять их, если они вдруг еще пригодятся.
Чтобы закомментировать что-то в CSS нужно использовать такую конструкцию /* */. Между звездочками будет комментарий. Например, так:
Конец урока. В данном уроке вы узнали:
<a></a> — тег для добавления ссылки на сайте.
<img> — тег для добавления изображения.
<form></form> — тег для добавления формы. Через форму отправляются на сервер многие данные такие, как имя, телефон, картинки, поисковые запросы и др.
<input> — тег для поля ввода.
<button></button> — тег для кнопки.
Иконочный шрифт — используется для добавления иконок на сайт.
display — CSS-свойство для изменения типа отображения элемента. Элементы могут быть блочными (располагаются друг под другом), строчными (располагаются слева направо).
padding — CSS-свойство для внутренних отступов элемента.