Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend
Как из моего любимого сериала «это мы» , который я буду пересматривать всю жизнь.
Если тебя беспокоит страшная мысль, выскажи свой страх в самых жёстких последствиях. Когда ты его для себя озвучиваешь, он во первых имеет свое лицо, во вторых ты можешь с ним работать, понять причину и найти способ, как облегчить свое состояние.
Думаю не стоит объяснять насколько важно понимать и использовать эти 2 технологии в работе с сайтом, поэтому давайте сразу перейдем к разбору.
Продолжаем постигать всеми любимый CSS и его возможности. Я постигаю его вместе с вами, а написание статьи хорошо закрепляет изученный материал.
Чтобы JavaScript не был сложен, запутан и недостижим. Давайте сегодня разберем, что лучше понять, перед тем как приступить к JS?
Сегодня поговорим о position и его значениях.
Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.
color это название анимации. Вы можете использовать любое имя для вашей анимации. Вставьте этот код в свой редактор и поэксперементируйте с цветами и временем.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"e2ebddba-23a0-541c-ad8d-ed554e083083","width":88,"height":70,"size":24925,"type":"gif","color":"158555","hash":"","external_service":[],"duration":0,"isVideo":false,"has_audio":false}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"В качестве альтернативы использования процентов, вы можете использовать ключевые слова from и to , где:
from это значение начинающееся с 0%
to это значение заканчивающееся на 100%.
Например, оба примера выводят один и тот же результат:
Или:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"@keyframes color {\nfrom {\n background-color: rgb(5, 136, 75);\n}\nto {\n background-color: rgb(187, 60, 56);\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Чтобы анимация работала, вам необходимо связать анимацию с элементом.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Теперь перейдем к изучению свойств animation.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"animation-name определяет какую анимацию использовать.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"animation-name: color;","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Свойство animation-duration определяет длительность выбранных анимаций в секундах.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"animation-duration: 3s;","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Если свойство animation-duration не было определено, то анимация не будет воспроизведена, потому что значением по умолчанию длительности является 0.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"animation-delay - определяет задержку до начала анимации.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Значения animation-delay и animation-duration могут быть определены в секундах (s) или миллисекундах (ms).
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"animation-timing-function определяет кривую скорости анимации. Может иметь следующие значения:ease - анимация начинается медленно, затем быстро, затем медленно заканчивается (по умолчанию), linear - анимация с одинаковой скоростью от начала и до конца, ease-in - анимация с медленным началом, ease-out - анимация с медленным концом, ease-in-out - анимация с медленным началом и концом, cubic-bezier(n,n,n,n) - позволяет вам определять собственные значения в функции cubic-bezier.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Свойство animation-iteration-count определяет количество повторов анимации. Infinity - бесконечно количество раз. Если вы используете 0 или отрицательное число для animation-iteration-count, то анимация никогда не начнется.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"animation-direction указывает, как ключевой кадр должен быть применен. Значениями могут быть: normal - значение по умолчанию, что значит, что оно выполняется от 0 % до 100%. reverse - анимация выполняется в обратном направлении от 100 % до 0%. alternate - анимация выполняется вперед, затем обратно, затем снова вперед. alternate reverse - анимация сначала выполняется в обратном направлении, затем вперед, затем снова в обратном направлении.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Разберем как можно сократить код, посмотрите пример ниже:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"div {\n animation-name: color;\n animation-duration: 3s;\n animation-timing-function: ease-in;\n animation-delay: 2s;\n animation-iteration-count: infinite;\n animation-direction: normal;\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"А теперь сокращаем:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"div {\n animation: color 3s ease-in 2s infinite normal;\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"3D трансформации.
Вместе с осями x и y, 3D Трансформация представляет ось-Z, которая позволяет 3D манипуляции.
3D Трансформация похожа на 2D Трансформацию:rotateX(), rotateY() и rotateZ() вращают элемент в 3-х мерном пространстве вокруг соответствующих осей и с заданным градусом.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"div.X {\n transform: rotateX(150deg);\n}\ndiv.Y {\n transform: rotateY(150deg);\n}\ndiv.Z {\n transform: rotateZ(150deg);\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Вы можете выключить все трансформации, примененные к элементу, используя функцию none: transform: none;
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Сдвиг.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Методы 3D сдвига позволяют вам передвигать элементы горизонтально (translateX), вертикально (translateY) и к или от экрана (translateZ), используя любые единицы длины (px, em, %, и т.д.). Положительные значения сдвигают элемент к зрителю, а отрицательные – от него.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"#box {\n transform: translateX(30px)\n translateY(4em)\n translateZ(-12px);\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Скопируйте и посмотрите код на практике, чтобы сравнить результат до сдвига и после сдвига.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Метод translate3d() позволяет вам передавать значения x, y, и z, все за один раз, следующим образом:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"#box {\n transform: translate3d(-22px, 4em, 10px);\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Также, как и в методе translate3d(), существуют также scale3d() и rotate3d(), которые применяются для масштабирования и вращения элементов в 3D.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Сдвиг элемента похож на косвенное позиционирование - он не влияет на поток документа. Сдвинутый элемент оставит свое положение в потоке и появится только для перемещения.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Перспектива.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Перспектива определяет глубину воспроизведения 3D сцены. Представляйте себе перспективу, как расстояние от зрителя до объекта. Чем больше значение, тем больше расстояние и меньше интенсивность визуального эффекта. При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"div.yellow {\n perspective: 100px;\n}\ndiv.red {\n transform: rotateX(45deg);\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Свойство perspective влияет только на трансформированные 3D элементы.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Испытывайте эти свойства на практике, внедряйте в свои проекты, чтобы оживить их. Также мы можем реализовать анимации через JavaScript, что я и планирую изучать дальше и делиться полученными знаниями с Вами.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"#frontenddeveloper #html #css #javascript #карьера #разработчики #программирование #itтехнологии #it #frontend
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":1,"reposts":0,"views":107,"hits":726,"reads":null,"online":0},"dateFavorite":0,"hitsCount":726,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/478589-klyuchevye-kadry-i-animaciya-v-css-svoistva-animacii-3d-transformacii-sdvig-i-perspektiva","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":477185,"customUri":null,"subsiteId":1259896,"title":"При обучении на Front-end, изучая CSS и HTML, как понять что ты уже готов к JavaScript?","date":1659718254,"dateModified":1659718254,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"973c6d20-ccbf-5e2e-aab6-477a5ed38d4a","width":720,"height":417,"size":39499,"type":"jpg","color":"37845e","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"Чтобы JavaScript не был сложен, запутан и недостижим. Давайте сегодня разберем, что лучше понять, перед тем как приступить к JS?
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"acc59e1c-12cf-528b-90b6-bb0628b98d93","width":800,"height":400,"size":25493,"type":"jpg","color":"b16425","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Понятно, что все мы индивидуальны и сроки, и процесс обучения проходит по разному, но часто проблемы в итоге у всех одинаковые.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Важно понимать, что JavaScript, напрямую взаимодействует и связан с HTML и СSS. Поэтому не изучать их не получится никак. В работе, Front-end разработчик, постоянно работает с элементами HTML и СSS.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Итак, первое что нужно понимать — это все основы HTML и СSS. Уровня: «когда ты смотришь на любой макет и понимаешь, что можешь его сверстать». И не просто сверстать, а применив технологии и простые решения. А для того, чтобы твой код был чистым и правильным, важно знать технологии Grid, Flexbox, блочную модель, псевдоклассы, псевдоэлементы, комбинаторы, позиционирование, адаптив, анимацию и так далее, и понимать где всё это лучше применять и как эффективнее, используя продвинутые приёмы.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Также важно понимать как работают, теги, классы, как сокращать код, знать семантику и методологию БЭМ.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"9480838f-5e2c-5969-9c62-e22f26af0e78","width":550,"height":275,"size":15956,"type":"jpg","color":"f8c3a2","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"И прежде чем перейти к практике, к вёрстке макетов, нужно понимать теорию. А вот закреплять теорию, как можно больше практикуясь и делать это регулярно!
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Чтобы программирование не показалось вам хаосом, чтобы вы не разочаровались и не поняли что это якобы не ваше, важно начинать путь изучения структурно и постепенно. В таком порядке, вы начнёте мыслить как разработчик.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Главное не останавливайтесь в развитии, следите за новыми инструментами, идеями, и успех Вас точно будет ожидать! Не бойтесь ошибок, не опускайте руки, хоть будет и сложно в самом начале пути.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Так вы получите ценный опыт, кейсы, знания и работу мечты. Всем удачи.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"#frontenddeveloper #html #css #javascript #карьера #разработчики #программирование #itтехнологии #it #frontend
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":1,"favorites":6,"reposts":0,"views":93,"hits":426,"reads":null,"online":0},"dateFavorite":0,"hitsCount":426,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/477185-pri-obuchenii-na-front-end-izuchaya-css-i-html-kak-ponyat-chto-ty-uzhe-gotov-k-javascript","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":3}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":474267,"customUri":null,"subsiteId":1259896,"title":"Позиционирование элементов, пошаговый разбор свойства position в CSS. Часть 1","date":1659386684,"dateModified":1659386684,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"973c6d20-ccbf-5e2e-aab6-477a5ed38d4a","width":720,"height":417,"size":39499,"type":"jpg","color":"37845e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Сегодня поговорим о position и его значениях.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Если в начале своего пути освоение вёрстки у вас тоже была или ещё есть проблема в понимании, а какое значение есть и в какой ситуации его использовать, то эта статья точно для вас.Начнём с теории, потом перейдем к практике и задачке. И снова я ссылаясь на htmlbook, расскажу и дополню определения.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Свойство position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Используется в основном для расположения одной картинки на другую или же фиксации элемента при scroll.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Свойство имеет 5 значений.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"absolute - указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"fixed - значение привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.Положение элемента задается свойствами left, top, right и bottom. Но при скролле страницы положение будет неизменно.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"relative - положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"static - элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"sticky - это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается и нужно на странице именно в этом месте.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"А теперь приступим к практике. Сначала показываю Вам картинку и задание, а потом мы подумаем и разберем как это сделать?
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Итак, задание, нам нужно спозиционировать маленький фиолетовый квадрат посередине большого зеленого квадрата, который будет размещен также посередине нашей страницы, вот тут нам как раз и понадобится свойство position, далее покажу как его нужно применить.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Задание на применения свойства position.","image":{"type":"image","data":{"uuid":"1bbaf583-7779-59f4-8939-34dc6b9a4a49","width":1098,"height":821,"size":12134,"type":"jpg","color":"74ebbc","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Рассмотрим решение в коде:
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Сначала мы создаем контейнер с блоком в HTML и теперь будем его стилизовать.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"Важно! Указать в CSS и понять какой блок является родителем дочернего элемента, в нашем случае это. item, относительно чего должен позиционироваться этот элемент? Если мы не указали свойство position у родителя, то он позиционирует этот элемент относительно всего тела body. Часто этот момент упускается и дочерний элемент оказывает вне интересующего нас блока.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":".container {\n\tposition: relative;\n\tmargin-top: 2%;\n\tmargin-left: 30%;\n\twidth: 600px;\n\theight: 600px;\n\tbackground:rgb(113, 237, 187);\n}\n.item {\n\tposition: absolute;\n\ttop:240px;\n\tright: 260px;\n\twidth: 100px;\n\theight: 100px;\n\tbackground: rgb(158, 88, 135);\n}","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Тут у родителя .container указываем position: relative; у дочернего position: absolute; и только после этого двигаем дочерний элемент значениями top и
right.
Еще один важный момент, не нужно указывать одновременно top, bottom, right и left, их нужно использовать только для тех сторон, которые нас интересует.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Таким образом, применив position родителю и дочернему элементу, мы с помощью значений position расположили фиолетовый квадрат как требовалось в задании.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Далее мы с вами поговорим о других значениях свойства position, уже в новых частях этого разбора с примерами и задачками. Кстати, подписывайтесь на мой тг канал, там вы ничего не пропустите и будете видеть мои статьи самыми первыми!
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"#frontenddeveloper #html #css #javascript #карьера #разработчики #программирование #itтехнологии #it #frontend
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":2,"favorites":0,"reposts":0,"views":70,"hits":5515,"reads":null,"online":0},"dateFavorite":0,"hitsCount":5515,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/474267-pozicionirovanie-elementov-poshagovyi-razbor-svoistva-position-v-css-chast-1","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":3}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":473141,"customUri":null,"subsiteId":1259896,"title":"Какая разница в max/min — width(height) и просто width(height)?","date":1659211704,"dateModified":1659211704,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"973c6d20-ccbf-5e2e-aab6-477a5ed38d4a","width":720,"height":417,"size":39499,"type":"jpg","color":"37845e","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Статья будет полезна, если ты уже приступил к практике и верстаешь свои первые проекты. Понимаю как важны такие простые разборы, поэтому решила по шагам показать как работает свойства на практике.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Как сказал htmlbook, а я дополню и разъясню. Width и height - устанавливает ширину и высоту блочных или заменяемых элементов. Ширина и высота не включает толщину границ вокруг элемента, значение отступов и полей.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Выражается свойство в %, пикселях (px), дюймах (in), пунктах (pt) и так далее. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родителя.
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":".container {\n\twidth: 30%; \n}\n.block { \n\tbackground: #a288a3;\n\tcolor: black; \n}","lang":""}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Содержимое .block заняло ширину заданную в родительском блоке равную 30%","image":{"type":"image","data":{"uuid":"080a3c06-0335-52fb-a458-9367b1258dc5","width":381,"height":177,"size":9493,"type":"jpg","color":"9e879e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"А если родитель явно не указан, то в его качестве выступает окно браузера.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"И как раз с помощью приставки max или min, мы можем задать максимальную или минимальную ширину или высоту элемента. А если значение ширины и высоты (width,height) больше или меньше значения max(min)-width(height), то ширина элемента принимается равной максимальному заданному значению.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Чтобы было еще легче понять, запомните эти моменты:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Если мы хотим, чтобы какой-то блок и содержимое в нем занимало фиксированную ширину или высоту мы добавляем max(min).","Свойство max(min)-width(height) указанное еще и в % делает макет отзывчивым и адаптивным."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Разница между ними в том, что когда ты ставишь width, то у тебя фиксированная ширина, а когда ты ставишь max-width, то блок с таким свойством будет при уменьшении экрана тоже уменьшаться, это сделано для адаптивности. Вот вам пример на двух блоках ( в примере используем px, так будет удобнее увидеть разницу):
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"Тут важно понимать, что если внутри блока не будет содержимого, мы ничего не увидим, автоматически заданные свойства будут равны 0, поэтому и наполнили блок текстом, а далее стилизуем два этих блока, задаём им ширину и цвет :
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":".block-width { \n\twidth: 1500px; \n\tmargin: auto; \n\tbackground: #a288a3;\n\tcolor: black; \n}\n\n.block-max-width { \n\tmax-width: 1500px; \n\tmargin: auto; \n\tbackground: #11ad8e; \n\tcolor: black;\n}","lang":""}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":".block-max-width уменьшается вместе с окном.","image":{"type":"image","data":{"uuid":"8f0bd0b7-4044-5fbe-be04-eee7a878a1f5","width":687,"height":387,"size":106629,"type":"jpg","color":"af9db1","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"На этом примере мы видим, что если размер ширины страницы будет меньше чем 1500px, блок 2, в котором указана максимальная ширина (max-width) будет уменьшаться, стараясь соответствовать размеру страницы, а блок 1 с обычной шириной остается всё того же размера. Высота работает точно также.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Вот вам еще один пример с картинкой, который показывает как вообще работает свойство width:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"![\"nature\"](\"image.jpg\")
","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Картинка без установления свойств ширины, так как ее размер по умолчанию больше и не помещается полностью, она уходит за рамки окна.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Без установления свойств ширины или высоты.","image":{"type":"image","data":{"uuid":"91873cf2-a848-52c1-9062-2d7e9644ae18","width":1878,"height":886,"size":326040,"type":"jpg","color":"e1cbba","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Устанавливаем ширину:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"img {\n\twidth: 30%;\n}","lang":""}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Теперь картинка занимает ширину окна, которую мы задали.","image":{"type":"image","data":{"uuid":"df73bd28-b8da-5291-876e-7ee7beb619ee","width":585,"height":398,"size":106679,"type":"jpg","color":"464517","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Заключение
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Таким образом, мы можем задать любую ширину или высоту картинки или блока, которая нам нужна по проекту. А если вы хотите, чтобы на странице был блок, который должен увеличиваться или уменьшаться, но только до определенного размера, используйте max и min. Копируйте код в примерах, экспериментируйте со значениями, и больше практики на старте! Удачи.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"#frontenddeveloper #html #css #javascript #карьера #разработчики #программирование #itтехнологии #it #frontend
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":2,"reposts":0,"views":59,"hits":2965,"reads":null,"online":0},"dateFavorite":0,"hitsCount":2965,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/473141-kakaya-raznica-v-max-min-widthheight-i-prosto-widthheight","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764947461,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":4}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"cursor":"PuR2GsZKFTvhhG5WBo/m6drVS6IzQAa09I6wtbz/zlbeaPDONLWrzk9a421EkW4=","isAnonymized":true}};