HTML /XHTML / HTML5, CSS / CSS3

Ефимерният уеб Построих страница, която изгаря това, което прочетеш. И тя не се извинява. Три статии подред разбивах чужди сайтове, за да покажа къде текат. Скриптове, стилове, разметка. Хакерска работа, полезна, но насочена навън. Този път обърнах ножа към себе си и счупих нещо мое, нарочно, защото исках да задам въпрос, който не се задава в уеб разработката. Защо приемаме за очевидно, че нещата трябва да останат? Целият занаят стъпва на едно недоказано допускане. Съдържанието трябва да е трайно. Достъпно. Кеширано, архивирано, дублирано, невъзможно за забравяне. Пишем така, все едно всеки байт заслужава вечност. И почти никой не пита дали вечността е това, което ни трябва, или просто това, което машините предпочитат. Затова...

Последната врата Нито скрипт, нито стил. Как самата разметка изтича данни, и защо кодирането я спира. Това е трета част от една неволна трилогия. В първата заключих скриптовете и се почувствах в безопасност. Във втората се оказа, че стилът също говори, и заключих и него. Логично беше да реша, че вече съм затворил всичко. Не бях. Оставаше една врата, за която почти никой не мисли, защото е толкова базова, че изглежда невъзможно да е опасна. Самата разметка. HTML-ът, върху който стъпва всичко останало. Има атака, която не иска нито JavaScript, нито CSS. Иска само едно: да оставиш непроверено съдържание да мине за HTML. Един незатворен таг, и браузърът сам изпраща тайна навън, докато чете страницата. Казва се dangling markup, тоест...

Тъмната страна на CSS Как един език за разкрасяване се научи да краде. И как да го спреш. В миналата статия заключих скриптовете. script-src 'none' в Content-Security-Policy, нула байта JavaScript, чувство за добре свършена работа. И точно там е капанът, в който повечето от нас попадат. Заключваш предната врата, гордееш се с ключалката, а стилът излиза през прозореца с тайната в джоба. Този текст е за тъмната страна на технология, която двайсет години смятахме за безобидна. CSS не изпълнява код, не прави заявки към бази данни, не пипа файлове. Само рисува. Точно затова почти никой не го одитира. И точно затова стана удобен инструмент за изтичане на данни. Няма да пиша наръчник за пакости. Ще покажа как работи механизмът, ще ти...

PROJECT 0 KB Изключих JavaScript. Сайтът не умря. Нека започна с провокация. Уебът не е станал тежък само защото задачите са тежки. Станал е тежък и защото сме си изградили рефлекс: виждаме бутон, меню или модален прозорец и още преди браузърът да е казал последната си дума, вече сме отворили package manager-а. Инсталираме библиотека, добавяме listener, местим класове по DOM дървото и накрая празнуваме, че един панел се отваря. Този път направих обратното. Забраних JavaScript напълно и си зададох прост въпрос: колко истински интерфейс може да остане, ако клиентът не получи нито един байт JavaScript? Не макет. Не картинка. Работещ сайт, който може да бъде използван с мишка и клавиатура. ▶ ОТВОРИ ЖИВОТО ZERO-JS ДЕМО После отвори...

🌟 Какво е Sass и защо е важно за уеб дизайна? 🌟 📊 Въведение: Sass, или Syntactically Awesome Stylesheets, е супер мощен инструмент, който прави писането на CSS по-лесно и ефективно. Ако сте начинаещи в уеб дизайна или просто искате да подобрите своите умения, Sass ще стане вашият най-добър приятел! 🙂 Sass е не само разширение на CSS, но и инструмент, който ви позволява да изграждате стилове по-организирано и ефективно. Чрез него можете да създавате по-структуриран и чист код, което води до по-бързи сайтове и по-удобна поддръжка. 🔬 Основни концепции на Sass: 1. 🌟 Променливи: Представете си, че пишете цветове, шрифтове и други стойности отново и отново. С променливите на Sass можете да съхранявате тези стойности на едно място и да...

🌈 Динамична таблица с цветове с JavaScript Искате ли да добавите динамика и интерактивност на вашия уебсайт? Създаването на таблица с цветове, генерирана чрез JavaScript, е лесен начин да привлечете вниманието на посетителите! Тази статия ще ви преведе стъпка по стъпка през процеса. 📋 Защо е полезно? Повишава интерактивността: Цветовата таблица реагира на потребителя, като променя цвета на фона при посочване. Създава модерна визия: Проста идея, която преобразява външния вид на вашия сайт. Лесно за изпълнение: Подходящо както за начинаещи, така и за напреднали разработчици. 🛠️ Как да го направите? HTML структура: Създайте основен HTML файл с таблица, която ще бъде генерирана динамично. Пример: <!DOCTYPE html> <html lang="bg">...

HTML5 Canvas-Основни техники и примери HTML5 Canvas е мощен инструмент, който предоставя 2D рисуване на веб базирани приложения в реално време. Той предлага гъвкавост и контрол, който може да превърне всяка идея в реалност, от създаването на просто приложение за рисуване до разработката на пълноценна игра като Тик-Так-То. Разработка на приложение за рисуване Нека започнем с просто приложение за рисуване. В нашия пример, приложението позволява на потребителите да рисуват на екрана с мишката. Когато потребителят натисне и задържи бутона на мишката, кодът започва да рисува линия по пътя на мишката. Когато бутона на мишката се освободи, рисуването спира. <!DOCTYPE html> <html> <body> <!-- Създаваме canvas елемент с ID "myCanvas" и...

HTML5-10 топ функции за перфектен уебсайт HTML5 е стандарт с множество нови функции и технологии, които предоставят разработчиците с нови възможности за създаване на по-богати и интерактивни уебсайтове. Ето 10 от най-новите функции в HTML5, които може да използвате на вашия уебсайт: 1.Семантични елементи: HTML5 въвежда редица семантични елементи, като <article>, <section>, <header>, <footer>, <nav> и <aside>, които помагат за по-добра структуриране на съдържанието и по-лесно SEO. 2.Видео и аудио: Вградените <video> и <audio> елементи позволяват лесно включване на мултимедийно съдържание, без да се нуждаете от външни плъгини като Adobe Flash. 3.Canvas API: <canvas> елементът...

Interactive Hover Menu HTML документ, който включва вградени стилове (CSS). <!DOCTYPE html> <!-- Toni Angelchovski HTML5 angelchovski.com |@bgwelding --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hover Menu</title> <style> .hover-menu { position: relative; overflow: hidden; margin: 8px; min-width: 340px; max-width: 480px; max-height: 290px; width: 100%; background: #000; text-align: center; box-sizing: border-box; } .hover-menu * { box-sizing: border-box; } .hover-menu img { position: relative; max-width: 100%; top: 0...

Ефект на задържане, при който градиентът следва курсора на мишката. HTML код, който включва вградени стилове (CSS) и скриптове (JavaScript): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hover Button</title> <style> .mouse-cursor-gradient-tracking { position: relative; background: #7983ff; padding: 0.5rem 1rem; font-size: 1.2rem; border: none; color: white; cursor: pointer; outline: none; overflow: hidden; } .mouse-cursor-gradient-tracking span { position: relative; } .mouse-cursor-gradient-tracking::before { --size: 0; content: ''...

HTML5 и CSS3: Мощните инструменти за съвременен уеб дизайн и разработка HTML5 и CSS3 са две от най-важните технологии за уеб дизайн и разработка в момента. HTML5 и CSS3 предоставят множество нови възможности за създаване на красиви и функционални уеб сайтове, които работят добре на всички устройства. HTML5 HTML5 е петата версия на Hypertext Markup Language, който се използва за създаване на уеб страници. Тази версия на HTML предоставя няколко нови елементи и атрибути, които улесняват създаването на уеб сайтове. С HTML5 може да се вграждат мултимедийни елементи като видео и аудио файлове директно в уеб страниците, без да се използват специални плъгини. HTML5 включва също така нови елементи като: които позволяват по-добро...

Обобщение на уеб демонстрации Селекция от завладяващи уеб експерименти, които си струва да проучите Забавлявайте се да изследвате! преглед Рисувай с цветя! (GLSL Shader & Three.js) Една наистина прекрасна демонстрация от Ксения Кондрашова: нарисувайте произволно цветни цветя, като движите мишката. Направено е с Three.js и шейдъри и можете да запазите екранната снимка на вашето творение! Shader-базирани antialiased wireframes чрез Barycentric Coordinates Това е демонстрация от разработчика Faraz Shaikh, която той направи, за да покаже как базираните на шейдъри телени рамки за Three.js вече са в Drei. Базиран е на работата на Matt DesLauriers. 3 кубчета в 3D (само CSS) Това е демонстрация, направена от Amit Sheen...

Направете си картичка с изрязано изображение. Използвайте background , за да добавите цветен фон към .container елемент. Създайте .card съдържащa figureс подходящото изображение за изрязването и всяко друго съдържание, което искате. Използвайте ::before псевдоелемента, за да добавите border около figure елемента, съответстващ на .container елемента background и създавайки илюзията за изрезка в .card. <!DOCTYPE HTML> <!-- Toni Angelchovski HTML5 angelchovski.com |@bgwelding --> <html> <head> <title>Картичка с изрязано изображение</title> <meta charset="utf-8" /> <link rel="stylesheet" href="main.css" /> </head> <body> <!-- Header --> <header> <div class="container"> <div class="card">...

Създава хоризонтално превъртаща се галерия с изображения. Използвайте display: flex и , justify-content: center за да настроите оформлението на контейнера. Използвайте display: flex и , flex-direction: column за да настроите оформлението на слайдовете. Използвайте scroll-snap-type: y mandatory и , overscroll-behavior-y: contain за да създадете ефект на щракане при вертикално превъртане. Прикрепете елементи към началото на контейнера с помощта на scroll-snap-align: start. Скрийте лентите за превъртане, като използвате scrollbar-width: none и оформите псевдоелемента ::-webkit-scrollbarдо display: none. Използвайте Element.scrollTo(), за да дефинирате scrollToElement функция, която превърта галерията до дадения елемент. Използвайте...

https://sass-lang.com/ Sass е най-зрелият, стабилен и мощен професионален език ЗА CSS разширения в света. CSS съвместим Sass е напълно съвместим с всички версии на CSS. Ние приемаме тази съвместимост сериозно, така че можете безпроблемно да използвате всички налични CSS библиотеки. Богат на функции Sass може да се похвали с повече функции и възможности от всеки друг език за разширение НА CSS . Основният екип на Sass работи безкрайно, за да не само бъде в крак, но и да остане напред. Одобрено от индустрията Отново и отново индустрията избира Sass като водещ език за разширение НА CSS . Голяма общност Sass се поддържа активно и се развива от консорциум от няколко технологични компании и стотици разработчици. Рамки Има...

https://learn.shayhowe.com/advanced-html-css/

https://search.google.com/test/mobile-friendly

Този валидатор проверява валидността на маркирането на уеб документи. https://validator.w3.org/

Какво е Apple Touch икона и как да я добавите към вашия уебсайт Тъй като все повече хора използват телефоните си, за да проверяват всичко онлайн – от билети за пътуване и хотелски резервации до борсова търговия и гледане на новини, уеб администраторите трябва да се уверят, че продуктите им са оптимизирани за мобилни устройства. Освен това, много хора , които са прегледали техния отчет за SEO одит, ме питат как да добавят икона на Apple към своите уебсайтове. Ето защо просто трябва да споделя как лесно да добавите това към уебсайта си. Разбира се, можете да поръчате SEO одит за вашия уебсайт, като се свържете с вашият хостинг провайдер. Какво представлява иконата на Apple? Тъй като голяма част от мобилните устройства се състоят от...

toni submitted a new resource: HTTP/1.1 срещу HTTP/2: Каква е разликата? - HTTP/2 Прочетете повече за този ресурс...