Български | Català | Deutsche | Hrvatski | Čeština | Dansk | Nederlandse | English | Eesti keel | Français | Ελληνικά | Magyar | Italiano | Latviski | Norsk | Polski | Português | Română | Русский | Српски | Slovenský | Slovenščina | Español | Svenska | Türkçe | 汉语 | 日本語 |
C

cssreference.io

Inscrit

CSS Reference - бесплатный визуальный гид по CSS без лишних заморочекНашелся настоящий клад для тех, кто хочет понять CSS без головной боли? Да, именно так. Сайт CSS Reference...

Date de mise à jour de l'analyse de la page: 2025/09/24 04:25:13
Date de la dernière mise à jour whois: 2026/03/16 16:44:18
Statut du domaine
Inscrit
Payé jusqu'à
03.11.2026
Disponible à partir de
03.12.2026

Description du site Web

📝

CSS Reference - бесплатный визуальный гид по CSS без лишних заморочек

Нашелся настоящий клад для тех, кто хочет понять CSS без головной боли? Да, именно так. Сайт CSS Reference- это то самое место, где можно изучать свойства каскадных таблиц стилей не через скучные мануалы, а живыми примерами. Просто открываете страницу, смотрите на анимацию, пробуете под себя - и сразу видно, как работает codeflex-directioncode, или зачем нужна codebackground-sizecode. Никаких сложностей, только практика.

Сайт выглядит аккуратно. Много картинок, движуха, чёткие описания. Каждый параметр - с наглядным примером. Хотите узнать про codebox-shadowcode? Он покажет, как тень падает, как меняется при изменении значений. А если интересен codetransitioncode - там всё будет плавно двигаться, будто по щелчку.

Особенно радует, что сайт полностью бесплатный. Ни подписок, ни платных разделов. Постоянно обновляется, добавляет новое. Было бы здорово, если бы авторы держали это в порядке ещё лет двадцать, но пока - всё работает нормально. И да, они просят отключить блокировщики рекламы. Это не каприз, а способ существовать. Так что, если вам нравится ресурс - уберите фильтры хотя бы на 10 секунд.

Что вообще внутри?

  • Анимации:все ключевые параметры - codeanimation-durationcode, codetiming-functioncode, и прочее. Всё с видео-примерами.
  • Фоновые свойства:codebackground-imagecode, coderepeatcode, codepositioncode - разбираются подробно.
  • Модель коробки:codepaddingcode, codemargincode, codebordercode, codebox-sizingcode. Тут даже codemin-heightcode и codemax-widthcode объяснены наглядно.
  • Позиционирование:codeabsolutecode, coderelativecode, codefixedcode - понятно, как работает каждый тип.
  • Flexbox и Grid:тут полно примеров по выравниванию, распределению пространства, гибким контейнерам.
  • Типографика:шрифты, интервалы, отступы, обтекание текста - всё в одном месте.

И да, совсем недавно появился книжка - emCSS in 44 minutesem. Один из авторов, видимо, решил не просто дать ссылку, а сделать что-то более полное. Судя по названию, за час можно ухватить основы. Не знаю, насколько это реально, но уже интересно.

Сестринский проект и соседи

У сайта есть брат - HTML Reference. Пока он не так активен, но если кто-то хочет разобраться с тегами, то там тоже можно найти кое-что полезное. А ещё советуют попробовать фреймворк Bulma- для тех, кому нужно быстро собрать сайт без лишних усилий.

Если честно, ресурс кажется очень живым. Нет ощущения, что это заглушка или временная страница. Домен работает, содержание актуально, оформление не пахнет хостинговым шаблоном. Наоборот - чувствуется личная забота. И даже при том, что нет телефонов, почт или официального юрлица, впечатление такое, будто за этим стоит человек, который сам сталкивается с тем же, чем занимается.

Часто задаваемые вопросы (FAQ)

А сайт действительно бесплатный?

Да да, всё бесплатно, всегда будет быть, говорится прямо - free and always will be, никто ничего не продаёт, никаких подписок. Только знания и картинки.

Почему просит отключить блокировщик рекламы?

Они сами пишут: Please whitelist us in your ad blocker. Thank you! Это их способ выжить. Без доходов из рекламы сайт может просто исчезнуть.

Можно ли использовать этот сайт как учебник?

Конечно можно. Особенно если ты любишь учиться на примерах. Там не просто текст, а движение, изменения, наглядность. Лучше, чем мануалы.

Что за книга CSS in 44 minutes?

Это новинка, упомянутая на главной странице. Даже не знаю, сколько там страниц, но название подсказывает, что кратко и по делу. Попробовать стоит.

Какие ещё есть проекты от создателей?

Есть HTML Reference - сестринский ресурс. И ещё советуют попробовать фреймворк Bulma для быстрого верстки сайтов. Не обязательное, но интересное предложение.

Score SEO
45.21%
66
Score obtenu
146
Note maximale

Informations principales

ℹ️
Titre: CSS Reference - A free visual guide to CSS
Description: CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Mots-clés: empty
Encodage des pages: utf-8
Taille du fichier de page: 53 KB

Informations sur le serveur

🖥️
IP: 172.67.186.95
Emplacement: ,,,,,,
Codage: utf-8

Informations Whois

📄
domain_name: cssreference.io
domain_id: REDACTED
update_date: 2025-11-18T11:23:46Z
update_time: 1763465026
creation_date: 2016-11-03T00:48:57Z
creation_time: 1478134137

Données brutes Whois

📋
            Domain Name: cssreference.io
Registry Domain ID: REDACTED
Registrar WHOIS Server: whois.gandi.net
Registrar URL: https://www.gandi.net
Updated Date: 2025-11-18T11:23:46Z
Creation Date: 2016-11-03T00:48:57Z
Registry Expiry Date: 2026-11-03T00:48:57Z
Registrar: Gandi SAS
Registrar IANA ID: 81
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +33.170377661
Domain Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Registry Registrant ID: REDACTED
Registrant Name: REDACTED
Registrant Organization: Jeremy Thomas
Registrant Street: REDACTED
Registrant City: REDACTED
Registrant State/Province: GL
Registrant Postal Code: REDACTED
Registrant Country: GB
Registrant Phone: REDACTED
Registrant Phone Ext: REDACTED
Registrant Fax: REDACTED
Registrant Fax Ext: REDACTED
Registrant Email: REDACTED
Registry Admin ID: REDACTED
Admin Name: REDACTED
Admin Organization: REDACTED
Admin Street: REDACTED
Admin City: REDACTED
Admin State/Province: REDACTED
Admin Postal Code: REDACTED
Admin Country: REDACTED
Admin Phone: REDACTED
Admin Phone Ext: REDACTED
Admin Fax: REDACTED
Admin Fax Ext: REDACTED
Admin Email: REDACTED
Registry Tech ID: REDACTED
Tech Name: REDACTED
Tech Organization: REDACTED
Tech Street: REDACTED
Tech City: REDACTED
Tech State/Province: REDACTED
Tech Postal Code: REDACTED
Tech Country: REDACTED
Tech Phone: REDACTED
Tech Phone Ext: REDACTED
Tech Fax: REDACTED
Tech Fax Ext: REDACTED
Tech Email: REDACTED
Name Server: iris.ns.cloudflare.com
Name Server: bayan.ns.cloudflare.com
DNSSEC: unsigned
URL of the ICANN Whois Inaccuracy Complaint Form: https://icann.org/wicf/
>>> Last update of WHOIS database: 2026-03-16T16:44:18Z

Audit SEO

🔍

Référencement technique

Code de réponse
HTTP/2 200
Statut 200 OK - la page se charge correctement.
Codage des caractères
Page: utf-8, Header: utf-8
Codage des caractères cohérent entre le HTML et les en-têtes.
Taille des pages
54674 bytes
Taille de page acceptable pour un chargement rapide.
Ressources
0 total
Nombre optimal de ressources.
Hreflang balises
hreflang tags
Ajoutez des balises hreflang si vous avez du contenu multilingue.
!
Robots.txt
Missing
Ajoutez le fichier robots.txt pour contrôler l’exploration des moteurs de recherche.
!
Sitemap
Not found
Ajoutez sitemap.xml et référencez-le dans robots.txt.
!
HTTPS
No
Passez au HTTPS pour bénéficier des avantages en matière de sécurité et de référencement.
Compression
gzip
Compression Gzip ou Zstd activée pour un chargement plus rapide.
Mise en cache
max-age=600
Les en-têtes de contrôle du cache sont correctement définis.
!
Vitesse des pages
Unknown
Temps de chargement non mesuré.

Référencement sur la page

Titre
CSS Reference - A free visual guide to CSS
Bonne longueur de titre (30 à 60 caractères).
Méta-description
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples. Lenght:143
Bonne longueur de méta description (100-160 caractères).
!
Titre H1
0 found - ""
Ajoutez exactement un titre H1 avec des mots-clés principaux.
!
Nombre de mots
Contenu très court. Visez au moins 500 mots pour un meilleur référencement.
!
Balise canonique
Ajoutez une balise canonique pour éviter les problèmes de contenu en double.
Méta en double
[]
Aucune balise méta en double trouvée.
Mots-clés
empty
Ensemble de méta-mots-clés (remarque : non utilisé par les principaux moteurs de recherche).

Contenu et UX

!
Langue
Ajoutez l'attribut lang à la balise pour l'accessibilité et le référencement.
Images
0 total, 0 missing ALT
Toutes les images ont le texte ALT approprié.
!
Fenêtre
Ajoutez une balise méta viewport pour la réactivité mobile.
!
Ouvrir le graphique
Missing: og:title, og:description, og:image, og:url
Ajoutez les balises OpenGraph manquantes pour le partage sur les réseaux sociaux :og:title, og:description, og:image, og:url
!
Données structurées
JSON-LD scripts
Ajoutez des données structurées (JSON-LD) pour des extraits enrichis et un meilleur référencement.

Postes dans Google

Expressions de recherche - Google

🔍
Position Phrase Page Fragment
9css top/property/top/
9left 0 right 0/positioning/
11font weight bold/property/font-weight/
15align items center/property/align-items/
18bottom css/property/bottom/
19justify content css/property/justify-content/
24transform/property/transform/
28gap css/property/grid-gap/
28css left/property/left/
29style content css/property/content/

Services supplémentaires

💎