Если вы разработчик полного стека или разработчик внешнего интерфейса, то наверняка вы использовали CSS в своем приложении. CSS играет важную роль в том, чтобы сделать ваш сайт красивым и привлекательным. Красивый пользовательский интерфейс всегда привлекает пользователя, и это становится для него хорошим поводом оставаться на сайте надолго.
Изучить CSS легко, и весело использовать и играть с его свойствами в вашем веб-приложении… но очень немногие люди овладевают им. Разработчиков раздражает, когда вещи или стили в их приложении ведут себя не так, как они хотят. Написание CSS для вашего приложения похоже на решение головоломок. Вы пробуете разные свойства и проверяете, как выглядит ваше приложение после применения собственного стиля.
Вам не нужно писать стиль для каждого элемента HTML. Ваш CSS делает ваш HTML-код меньше. Вы обнаружите, что создать красивый дизайн для вашего сайта легко. Написать идеальный CSS нелегко, но если вы в этом мастер, то наверняка сэкономите много времени. Кроме того, вам не придется обсуждать это с дизайнерами.
В этом блоге мы обсудим некоторые приемы CSS, которые помогут вам написать хороший CSS для вашего проекта. Следуя этим трюкам, вы станете лучшим разработчиком…
Уловка 1: сделайте вашу кнопку идеальной
Кнопки — общие элементы любого веб-приложения. Если вам нужно отправить форму, перенаправление на другую страницу, купить товар, или отправить по электронной почте, в большинстве случаев вы будете использовать кнопки для достижения этих задач. Независимо от того, какие кнопки привлекают внимание пользователей, важно, чтобы ваша кнопка была идеальной. Различные программисты следуют разным подходам, чтобы получить тот же результат. То же самое происходит в CSS. Ниже приведены несколько советов, как сделать вашу кнопку идеальной…
- Размер: область должна быть не менее 40 × 40 пикселей, чтобы кнопка была интерактивной на мобильных устройствах.
- Box-shadow: Добавить окно-тень, чтобы создать на эффект глубины для вашей кнопки.
- Минимальная ширина: если вы видите, что текст на вашей кнопке слишком короткий, добавьте минимальную ширину для минимального размера кнопки. Чтобы выровнять текст по центру, используйте свойство text-align: center в CSS.
- Наведение: вы наводите указатель мыши на свойство CSS, чтобы сделать вашу кнопку интерактивной. Это привлечет внимание пользователя. Наведите указатель мыши, чтобы изменить цвет кнопки при наведении на нее указателя мыши. Он легко привлекает внимание пользователя.
- Переходы: Добавление перехода цвета, добавить в дополнительный контакт.
- Закругленные углы: это необязательно, но кнопки с закругленными углами также привлекают внимание пользователей.
- Высота строки : для вертикального центрирования текста на кнопке с заполнением используйте высоту строки. Высота строки задает пространство между линиями в случае с одиночной линией и элементом с на дисплее. Пример приведен ниже.
//CSS
button {
margin: 30px;
line-height: 60px;
min-width: 160px;
font-family: Arial, sans-serif;
background-color: #FD310F;
border-radius: 4px;
text-align: center;
border: 0;
cursor: pointer;
color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #0000ff;
} Уловка 2: панели кнопок
Вы группируете кнопки с разными действиями на панели кнопок. В этой группе кнопок общее количество кнопок или размер кнопок сбивает разработчиков с толку. Для разных кнопок вам может понадобиться разный дизайн, здесь написание CSS становится для вас трудным. В этом случае нельзя быть гибким. Чтобы решить эту проблему, вы можете написать приведенный ниже код…
HTML
//CSS
.button-bar {
background-color: #00FF00;
padding: 0 7px;
text-align: right;
}
.button-bar button {
margin: 20px 12px;
display: inline-block;
} Уловка 3: изменение размера изображения
Изменение размера изображений также является сложной задачей. В вашем веб-приложении вы не хотите, чтобы ваши изображения масштабировались. Часто бывает, что изображения становятся размытыми, разрешение изображения низкое. Изображения должны быть небольшими, чтобы избежать подобных проблем. Чаще всего мы представляем изображения в пикселях. Определите определенный размер для изображений. По идее, исходный размер изображения сделать максимальным. Если размер изображения 200 пикселей, оставьте максимальную ширину 200 пикселей.
Лучший трюк, который вы можете попробовать, — это определить размер изображений в процентах. Вы можете найти соотношение между максимальной шириной и шириной экрана, а затем вы можете установить максимальную ширину на определенный процент от ширины экрана.
Вы можете рассмотреть сценарий, в котором ширина изображения составляет 400 пикселей, а ширина установлена на 100%. Теперь могут произойти две вещи, которые описаны ниже.
- Если размер экрана будет 800 пикселей в ширину, то максимальная ширина будет 800 пикселей. Здесь ширина изображения всего 400 пикселей. ТАК, это на самом деле будет отображаться как 400 пикселей.
- Если изображение больше, чем ваш экран, то, например, размер экрана составляет 300 пикселей, а максимальная ширина установлена на 100%, тогда изображение будет масштабироваться до размера 300 пикселей в ширину.
<div class="content"> <img src="..."/> </div>
.content{
/* Min space between image and window */
padding: 30px;
}
.content img{
display: block;
margin: 0 auto;
max-width: 100%;
} Уловка 4: фиксированный заголовок
Все мы используем заголовки в нашем приложении вверху. Заголовки выглядят хорошо, но сделать идеальный заголовок сложно. Возможно, вы заметили на каждом веб-сайте, что заголовки липкие. Это свойство достигается за счет использования position: fixed для заголовков. Но здесь вы увидите пустое место в начале страницы.
Вы столкнетесь с проблемой, когда вам придется изменить размер страницы. Высота заголовка будет изменяться всякий раз, когда вам нужно будет отрегулировать пространство. Вы также столкнетесь с проблемой с полосами прокрутки. Часть этого будет освещена в шапке. Чтобы преодолеть эту проблему, используйте на гибкое свойство в CSS.
HTML
<divclass="page"><divclass="header">Logo</div><divclass="content"><!-- Content Page --></div></div>
//CSS
.page{
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page .header{
background-color: #000;
line-height: 30px;
color: #fff;
text-align: center;
}
.page .content{
flex: 1;
overflow: auto;
} Уловки 5: Центрирование содержимого
Ни один из сайтов не работает без контента. Разработчикам пользовательского интерфейса важно соблюдать осторожность при размещении контента на разных страницах и придании им стиля. Контент на любом веб-сайте должен быть правильно размещен и должен хорошо выглядеть на нескольких устройствах с разными разрешениями. Это тоже непростая задача.
Большинство разработчиков используют медиа-запросы для решения этой проблемы. Добавление медиа-запросов в контент усложняет задачу, потому что вам, возможно, придется добавлять различные коды медиа-запросов для разного разрешения.
Чтобы решить эту проблему, вы можете изменить размер содержимого страницы в зависимости от размера браузера. Здесь нужно учитывать, что содержимое внутри div — это текст. Здесь будет трудно читать, когда каждая линия будет примерно 1300-1500 пикселей. Вам нужно ограничить ширину содержимого. Отцентрируйте это по горизонтали, потому что при более высоком разрешении он не будет охватывать всю ширину.
Ниже приведено решение этой проблемы…
- Max-width:вам нужно ограничить размер страницы до максимальной ширины.
- Margin: «0- Auto» -это свойство будет устанавливать одинаковое левое и правое поле, которое будет центрировать div по горизонтали с «class = page».
- Отступ: для создания некоторого пространства между экраном и содержимым.
HTML
<divclass="page"><p><!-- Content Page --></p></div>
// CSS
body{
padding: 30px;
font-family: Arial, sans-serif;
}
.page{
background-color: #0000FF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 0 auto;
max-width: 600px;
padding: 30px;
} Заключение
В начале своей карьеры вы будете использовать CSS и многому научитесь, но написать идеальный CSS непросто. Это приходит с практикой и пониманием кодекса других людей. Поиграйте со своим кодом и проверьте, как он влияет на ваше веб-приложение. Делая это, вы многое поймете.
