ДИГИТАЛЕН СВЯТ

Регистрирайте безплатен акаунт днес, за да станете член! След като влезете, ще можете да участвате в този сайт, като добавяте свои собствени теми и публикации, както и да се свързвате с други членове чрез вашата лична пощенска кутия!

HTML /XHTML / HTML5, CSS / CSS3

Всичко за HTML / HTML5 / XHTML , CSS / CSS3
🌟 Какво е 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 включва също така нови елементи като <header>, <nav>, <section>...
Обобщение на уеб демонстрации Селекция от завладяващи уеб експерименти, които си струва да проучите Забавлявайте се да изследвате! преглед Рисувай с цветя! (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 се поддържа активно и се развива от консорциум от няколко технологични компании и стотици разработчици. Рамки Има...
Какво е Apple Touch икона и как да я добавите към вашия уебсайт Тъй като все повече хора използват телефоните си, за да проверяват всичко онлайн – от билети за пътуване и хотелски резервации до борсова търговия и гледане на новини, уеб администраторите трябва да се уверят, че продуктите им са оптимизирани за мобилни устройства. Освен това, много хора , които са прегледали техния отчет за SEO одит, ме питат как да добавят икона на Apple към своите уебсайтове. Ето защо просто трябва да споделя как лесно да добавите това към уебсайта си. Разбира се, можете да поръчате SEO одит за вашия уебсайт, като се свържете с вашият хостинг провайдер. Какво представлява иконата на Apple? Тъй като голяма част от мобилните устройства се състоят от...
Източник HTML5-Cheat-sheet HTML5 е най-новата версия на езика, който изгради мрежата. Петата ревизия на HyperText Markup Language (HTML) продължава еволюцията на HTML до динамичен скриптов език. В първите си дни HTML се използва за представяне на статично съдържание, като текст, изображения и таблици. След пристигането на Web 2.0 и експлозията на интерактивност и мултимедийно съдържание, HTML претърпя трансформация, за да приеме и използва нови функции. Какво е HTML 5? Приветстван (и хулен) като „убиецът на Flash“, HTML 5 помага за по-добър дизайн и оформление, като същевременно поддържа нови типове съдържание. Тези актуализации наложиха доста промени в основния код на самия HTML. В допълнение към новите тагове за оформление като...
Top Bottom
🛡️ Този сайт използва аналитични инструменти за подобряване на потребителското изживяване. Никакви лични данни не се събират. С продължаването си в Потока приемаш тази философия на прозрачност и уважение.