Utilităţi CSS
-
CSS
Meniu responsive simplu
HTML
XHTML123456789<div class="navbar"><div class="menu-icon" id="menuIcon" onclick="toggleMenu()">☰</div><div class="menu" id="menu"><a href="#home">Home</a><a href="#about">About</a><a href="#services">Services</a><a href="#contact">Contact</a></div></div>Style
CSS12345678910111213141516171819202122232425262728293031323334353637body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.navbar {display: flex;justify-content: space-between;background-color: #333;padding: 10px;position: relative;min-height: 2em;}.navbar a {color: white;text-decoration: none;padding: 14px 20px;display: block;}.navbar a:hover {background-color: #575757;}.menu-icon {font-size: 1.5em;display: none;cursor: pointer;color: white;right: 5px;position: absolute;}.menu {display: flex;}@media (max-width: 600px) {.menu {display: none;flex-direction: column;width: 100%;}.menu-icon {display: block;}.menu.active {display: flex;}}JavaScript
JavaScript12345678910111213function toggleMenu() {const menu = document.getElementById('menu');const menuIcon = document.getElementById('menuIcon');menu.classList.toggle('active'); // Toggle the active class for the menu// Change the menu icon between ☰ and Xif (menu.classList.contains('active')) {menuIcon.innerHTML = '⛌';} else {menuIcon.innerHTML = '☰';}}Dacă nu ne dorim să fie prea sofisticat, adică nu neapărat să…
-
CSS
Formatare elemente ce conţin un text anumit
Ar fi vreo două aspecte privind stilizarea elementelor care au anumite valori ale atributelor sau chiar conţinutul lor….
-
CSS
Centrare orizontală-verticală a conţinutului în casetă
Dacă centrarea pe orizontală a unei casete (DIV) se poate face relativ simplu cu atributul „margin: 0 auto;”,…
-
CSS
Pseudo-clase, Pseudo-elemente, Selectori, Combinatori
Dacă o pseudo-clasă este folosită pentru a defini trăsături speciale ale unui element, un pseudo-element CSS este folosit…