Пользовательский интерфейс — это первое, что привлекает на вашем сайте пользователя. Макет вашего веб-сайта или дизайн вашего веб-сайта дает пользователю хорошее настроение. Он не так широко используется в качестве JavaScript, но входит в число основных языков программирования. Его используют 96% всех веб-сайтов. При создании приложения мы всегда стараемся оптимизировать код. Мы следуем нескольким ярлыкам и хитростям. Это также применимо для CSS. Эти приемы сэкономят много времени и улучшат дизайн вашего сайта. Вы можете вставить эти фрагменты прямо в свой код. При создании приложения чаще всего мы пишем длинный код на CSS. Мы добавляем различные свойства в наш код, чтобы добиться соответствующего дизайна нашего веб-сайта. Эти вещи делают наш код беспорядочным, и чтобы избежать этого, мы собираемся поделиться некоторыми хитростями в CSS. Эти хаки помогут вам написать эффективный код для пользовательского интерфейса веб-сайта. Давайте начнем.
Теперь мы рассмотрим 7 CSS-хаков, которые должен знать каждый разработчик.
1. Задержки эффекта наведения с помощью CSS. Для создания эффекта наведения вы можете использовать селектор наведения. Чтобы отсрочить эффект зависания, вы можете использовать элемент перехода, чтобы задержать эффект зависания. В принципе, он выглядит настолько чистым, что привлекает внимание пользователя к элементу.
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><html><head><style>h1 {color: green;position: relative;animation: lit 2s;animation-delay: 2s;}@keyframes lit {from {left: 0px;}to {left: 200px;}}</style></head><body><h3>How to use animation-delay in CSS?</h3><p>Animation will start after 2 sec.</p><h1>bestprogrammer</h1></body></html>
2. Размещение содержимого в центре с помощью CSS. Ещё одна сложная задача, с которой сталкиваются разработчики пользовательского интерфейса, — это размещение содержимого в центре. Установка позиции свойства: абсолютное решение этой проблемы. Контент будет расположен в центре. Установка этого свойства будет работать на всех устройствах.
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><html><head><title>Page Title</title><style>.parent {position: relative;height: 400px;width: 400px;background-color: red;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 100px;width: 100px;background-color: blue;}</style></head><body><divclass="parent"><divclass="child">This element is centered</div></div></body></html>
3. Исправьте положение элемента в CSS. Работая над кодом в CSS, вы можете найти элементы, которые нужно исправить, в определенной позиции. Для новичка это может оказаться самой сложной задачей. Чтобы получить желаемый результат, вы можете установить свойство position: absolute. Убедитесь, что это свойство не нарушает отзывчивость вашего сайта. Проверяйте внешний вид своего сайта на любом размере экрана и разрешении. Это гарантирует, что ваш дизайн будет соответствовать всем разрешениям экрана и устройствам. Элементы должны оставаться в одном положении для всех пользователей.
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><html><head><style>div.fixed {position: fixed;bottom: 0;right: 0;width: 300px;border: 3px solid #73AD21;}div.absolute {position: absolute;top: 150px;right: 80;width: 200px;height: 100px;border: 3px solid #73AD21;}</style></head><body><h1>position: absolute;</h1><h2>position: fixed;</h2><divclass="absolute">This element has position: absolute;</div></body></html>
4. Подгонка изображений под страницу в CSS. Если изображения могут сделать ваш сайт красивым, они могут сделать и ваш сайт некрасивым. Изображения выглядят очень плохо на веб-сайте, когда они растекаются по всему экрану. Эта проблема часто встречается в веб-разработке. Это производит плохое впечатление на посетителей сайта. Итак, какое решение для этого?
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><html><head><style>.geeks {width: 60%;height: 300px;}img {width: 100%;height: 100%;}</style></head><body><divclass="geeks"><imgsrc="https://media.bestprogrammer.ru/wp-content/uploads/bestprogrammer.png"alt="Geeks Image"/></div></body></html>
5. Стиль посещаемой ссылки в CSS. Вы можете настроить стиль своей ссылки, когда пользователь ее посещает. Вы могли заметить, что после щелчка по ссылке стиль или цвет ссылки меняется. Также вы можете настроить его так, как вам нужно, и вы можете закодировать, чтобы настроить внешний вид ссылок до и после нажатия на них.
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><htmllang="en"><head><!--Meta data--><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>h1 {color: #006600;text-align: center;}/* If the link is unvisited you see this color*/a:link {color: #006600;text-decoration: none;}/* If the link is visited you see this color*/a:visited {color: rgb(255, 105, 223);}/* On placing mouse over the link */a:hover {color: rgb(128, 105, 255);text-decoration: underline;}/* If the click the link, you see this color*/a:active {color: rgb(255, 105, 138);}</style></head><body><h1>bestprogrammer</h1><p>Click the links</p><ul><li><ahref="https://bestprogrammer.ru/dbms/?ref=ghm">DBMS</a></li><li><ahref="https://bestprogrammer.ru/computer-network-tutorials/?ref=ghm">Computer Networks</a></li><li> <ahref="https://bestprogrammer.ru/operating-systems/?ref=ghm">Operating Systems</a></li><li><ahref="https://bestprogrammer.ru/data-structures/?ref=ghm">Data Structures</a></li><li><ahref="bestprogrammer.ru">And many more</a></li></ul></body></html>
6. Объедините стили в CSS. Если на вашей веб-странице вам нужно повторить один и тот же стиль несколько раз, то написание этого фрагмента кода в нескольких местах займет много времени. Здесь вам нужно оптимизировать свой код CSS, и вам нужно написать код в меньшем количестве строк, вы можете разделить элементы запятыми, и вы можете записать в него стиль. Он будет добавлен ко всем.
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><html><head><style>.geeks,img {width: 70%;height: 70%;}</style></head><body><divclass="geeks"><imgsrc="https://bestprogrammer.ru/wp-content/uploads/geeksforgeeks-25.png"alt="Geeks Image"/></div></body></html>
7. Сброс и отключение стилей CSS. Может возникнуть ситуация, когда вам нужно переопределить все атрибуты стиля по умолчанию для разных браузеров. Стиль по умолчанию не гарантирует, что он будет работать во всех браузерах. В каждом браузере есть собственная таблица стилей со встроенными стилями по умолчанию. Если дизайн не будет работать в используемом вами браузере, это может стать проблемой для вас, особенно когда вам придется сделать свой веб-сайт согласованным во всех браузерах. Ниже приведено решение для этого.
Пример фрагмента кода приведен ниже.
HTML
<!DOCTYPE html><html><head><title>How to reset/remove CSSstyles for element ?</title><style>body {display: grid;min-height: 100vh;}.gfg {all: unset;}.geeks {color: green;font-size: 3rem;}</style></head><body><center><divclass="geeks"><buttonclass="gfg">bestprogrammer</button></div><p>Here the bestprogrammer button isattached with the unset property</p><br><buttonclass="GFG">A Online Computer Secience Portal</button></center></body></html>
Заключение
Мы поделились некоторыми распространенными хитростями CSS, но здесь они не ограничиваются. По мере того, как вы продвигаетесь по пути разработки внешнего интерфейса, вы многое узнаете о CSS. Чтение кода другого разработчика очень помогает в создании красивого пользовательского интерфейса. При разработке пользовательского интерфейса очень важно проверять скорость отклика вашего веб-приложения во всех браузерах. Многие разработчики в конечном итоге пишут длинный код, что нехорошо. Мы настоятельно рекомендуем им проверить код другого разработчика и проверить проекты, которые используют меньше строк кода и при этом достигают тех же результатов.
