\n\u003Cimg src=\"...\" />",{"id":333,"type":20,"data":334},"XGOs-tHmmh",{"text":335},"In this case we will only select an image with \u003Cb>alt\u003C/b> attribute set.",{"id":337,"type":39,"data":338},"Vz5MAhrI-8",{"code":339},"[alt] {\n width: 200px;\n}",{"id":341,"type":20,"data":342},"otJypJeUk-",{"text":343},"Or we can do more specific things by combining different selector as always. Let's ensure, that we will select only images.",{"id":345,"type":39,"data":346},"bDnXpha6-T",{"code":347},"img[alt] {\n width: 200;x\n}",{"id":349,"type":29,"data":350},"W_lCE3E5ij",{"text":351,"level":32},"CSS selector by attribute value [attribute=\"value\"]",{"id":353,"type":20,"data":354},"RRwwHPxELM",{"text":355},"One more way to make previous selector more specific, is to set attribute value we are looking for.",{"id":357,"type":39,"data":358},"whMWNUZuYM",{"code":359},"\u003Cimg src=\"lion.png\" alt=\"Lion\" />\n\u003Cimg src=\"penguin.png\" alt=\"Penguin\" />\n\u003Cimg src=\"cat.png\" alt=\"Cat\" />",{"id":361,"type":20,"data":362},"CIX6yGLqvV",{"text":363},"Let's select only image with penguin.",{"id":365,"type":39,"data":366},"ILAW2I6rhz",{"code":367},"img[src=\"penguin.png\"] {\n width: 200px;\n}",{"id":369,"type":29,"data":370},"PqSxUUo2v6",{"text":371,"level":32},"CSS selector by part of attribute value [attribute*]",{"id":373,"type":20,"data":374},"-ti_5SgVPI",{"text":375},"But what if we don't want to match whole attribute value? Well, for this case we can use next selector. Let's highlight links, that have \"google\" part in their URLs.",{"id":377,"type":39,"data":378},"k1RGnaQbWa",{"code":379},"\u003Ca href=\"https://accounts.google.com\">Google\u003C/a>\n\u003Ca href=\"https://google.com\">Google\u003C/a>\n\u003Ca href=\"https://youtube.com\">Youtube\u003C/a>",{"id":381,"type":20,"data":382},"Rg0I4JWzDz",{"text":383},"In this case, only links that have \"google\" in their hrefs will be highlighted.",{"id":385,"type":39,"data":386},"fvcgEaz_ah",{"code":387},"a[href*=\"google\"] {\n color: lime;\n}",{"id":389,"type":29,"data":390},"_uGZrrNyoq",{"text":391,"level":32},"CSS selector by attribute value start [attribute^]",{"id":393,"type":20,"data":394},"0Z2agmh_IZ",{"text":395},"Previous selector is great for the most tasks, but also, we can find attributes values, that start with specific text. For instance, let's make different highlighting for safe and unsafe links.",{"id":397,"type":39,"data":398},"rAXu6ipjaJ",{"code":399},"\u003Ca href=\"https://google.com\">Google (safe)\u003C/a>\n\u003Ca href=\"http://google.com\">Google (unsafe)\u003C/a>",{"id":401,"type":20,"data":402},"qgT1cSFI5e",{"text":403},"The code below will mark safe (https, secured) links with lime color, and unsafe (plain http) with red color.",{"id":405,"type":39,"data":406},"dkkfxua_3X",{"code":407},"a[href^=\"https\"] {\n color: lime;\n}\n\na[href^=\"http\"] {\n color: red;\n}",{"id":409,"type":29,"data":410},"mF0LjjmYcl",{"text":411,"level":32},"CSS selector by attribute end [attribute$]",{"id":413,"type":20,"data":414},"P7BoYSe330",{"text":415},"Also, we have a opposite selector to previous one, This selector will allow us to select elements, that have some attribute value ending. Let's make all JPG images 300 pixels width.",{"id":417,"type":39,"data":418},"3xmf2BgtcR",{"code":419},"\u003Cimg src=\"cat.png\" alt=\"cat\" />\n\u003Cimg src=\"dog.jpg\" alt=\"dog\" />",{"id":421,"type":20,"data":422},"i0vSI30tTV",{"text":423},"Let's select only image, that have \u003Ci>src\u003C/i> attribute ending with '.jpg'.",{"id":425,"type":39,"data":426},"QpQ6iHHz0P",{"code":427},"img[src$=\".jpg\"] {\n width: 300px;\n}",{"id":429,"type":29,"data":430},"hwb-Ng2dJt",{"text":431,"level":32},"CSS selector for checked inputs :checked",{"id":433,"type":20,"data":434},"kSRtbZUX1t",{"text":435},"Now, let's talk about checkbox and radio inputs. There is a way of how to select only checked elements. To do this, we will be using :checked selector. This technique can be useful if you're creating custom input elements.",{"id":437,"type":39,"data":438},"nMWAUkliBJ",{"code":439},"\u003Cinput type=\"checkbox\" name=\"example-1\" />\n\u003Cinput type=\"checkbox\" checked name=\"example-2\" />\n\u003Cinput type=\"checkbox\" name=\"example-3\" />",{"id":441,"type":20,"data":442},"zqG1wsxZzW",{"text":443},"The selector below will select only the second input. Don't worry, it'd work even if user click on this element, checked attribute was added only for visual understanding.",{"id":445,"type":39,"data":446},"8EPgbMuqms",{"code":447},"input:checked {\n // Do something with it\n}",{"id":449,"type":29,"data":450},"cI9aFfyFw5",{"text":451,"level":32},"CSS not selector :not(selector)",{"id":453,"type":20,"data":454},"no9d_NA2Re",{"text":455},"CSS not selector will help us to pick some elements, except other ones by condition. In the example below, we will change the color of all div elements, except those that have class \"box\".",{"id":457,"type":39,"data":458},"RC_QcdqLzE",{"code":459},"div:not(.box) {\n background: red;\n}",{"id":461,"type":29,"data":462},"tTJdUyMuKq",{"text":463,"level":32},"CSS selector based position of element :nth-child(n)",{"id":465,"type":20,"data":466},"9w0_O-LwNA",{"text":467},"This selector will help us to find nth element in its parent.",{"id":469,"type":20,"data":470},"m_g4240y2g",{"text":471},"Let's mark every second link in an element with \"block\" class.",{"id":473,"type":39,"data":474},"-YGoA6H63c",{"code":475},".block a:nth-child(2) {\n color: red;\n}",{"id":477,"type":29,"data":478},"s28ogYT70S",{"text":479,"level":32},"CSS selector based on position starting from the end :nth-last-child(n)",{"id":481,"type":20,"data":482},"aUDG-QvHF3",{"text":483},"Also, we have similar selector, but starting from the end.",{"id":485,"type":20,"data":486},"oV0LgzSaCS",{"text":487},"Let's mark every 3rd link in an element with \"block\" class, starting from the end.",{"id":489,"type":39,"data":490},"7SCGZBkVQt",{"code":491},".block a:nth-last-child(3) {\n color: lime;\n}",{"id":493,"type":29,"data":494},"vZO5sG3VkM",{"text":495,"level":32},"CSS selector based on position of element with given type :nth-of-type(n)",{"id":497,"type":20,"data":498},"HFDyV0qB3I",{"text":499},"This selector is similar to \u003Ci>:nth-child\u003C/i>, but it only counts elements of the same type. Let’s say we want to highlight the second link inside a block.",{"id":501,"type":39,"data":502},"I7OncFvY_8",{"code":503},".block a:nth-of-type(2) {\n color: red;\n}",{"id":505,"type":20,"data":506},"JMMsEBoxSw",{"text":507},"Only the second \u003Cb><a>\u003C/b> tag (not second child overall) will be selected.",{"id":509,"type":29,"data":510},"zTsDPUDkv6",{"text":511,"level":32},"CSS selector based on position of element with given type starting from end :nth-last-of-type(n)",{"id":513,"type":20,"data":514},"2sCy0FRqr4",{"text":515},"Works just like the previous one but starts counting from the end. In the example below, we highlight the second link from the end.",{"id":517,"type":39,"data":518},"2PtYv5Y1St",{"code":519},".block a:nth-last-of-type(2) {\n color: red;\n}",{"id":521,"type":29,"data":522},"sT_c5kzQJH",{"text":523,"level":32},"CSS selector for first child :first-child",{"id":525,"type":20,"data":526},"zYXEoeuOAP",{"text":527},"This pseudo-class selects the first child element within a parent.",{"id":529,"type":39,"data":530},"61YuUQEwmC",{"code":531},".block a:first-child {\n color: red;\n}",{"id":533,"type":20,"data":534},"YPYsgScSzH",{"text":535},"Only the first link inside .block will be selected.",{"id":537,"type":29,"data":538},"0ukROTwtqf",{"text":539,"level":32},"CSS selector for last child :last-child",{"id":541,"type":20,"data":542},"WesSZUy-jA",{"text":543},"This one does the opposite – selects the last child.",{"id":545,"type":39,"data":546},"VZyV1VT10U",{"code":547},".block a:last-child {\n color: red;\n}",{"id":549,"type":29,"data":550},"eAt3KNM8fe",{"text":551,"level":32},"CSS selector for only child of its parent :only-child",{"id":553,"type":20,"data":554},"L5QmarSaRT",{"text":555},"This selector targets an element if it is the only child of its parent.",{"id":557,"type":39,"data":558},"kN-7lHNfnf",{"code":559},".block p:only-child {\n color: red;\n}",{"id":561,"type":20,"data":562},"Q-ylsZWERn",{"text":563},"Will only apply if the paragraph is the only child inside .block.",{"id":565,"type":29,"data":566},"xTfqZq2UgL",{"text":567,"level":32},"CSS selector for elements if there is only one element of specific type in parent :only-of-type",{"id":569,"type":20,"data":570},"oZJy950SUn",{"text":571},"This one selects an element if it’s the only one of its type within the parent. For example, the only <a> tag in a block:",{"id":573,"type":39,"data":574},"IPSSvr4TZR",{"code":575},".block a:only-of-type {\n color: red;\n}",{"id":577,"type":29,"data":578},"6ZhcEoVD1Z",{"text":579,"level":32},"CSS selector for the first element of type :first-of-type",{"id":581,"type":20,"data":582},"ZfN3dotgwW",{"text":583},"Selects the first element of a given type within its parent.",{"id":585,"type":39,"data":586},"65z2q4wahb",{"code":587},".block a:first-of-type {\n color: red;\n}",{"id":589,"type":20,"data":590},"pBDuiRh9uW",{"text":591},"Only the first <a> tag inside .block will be selected, even if it’s not the first child overall.",{"id":593,"type":29,"data":594},"Kde43YwXXC",{"text":595,"level":32},"CSS pseudo-elements ::before and ::after",{"id":597,"type":20,"data":598},"5Y7VPWTzI8",{"text":599},"These are used to add decorative content before or after the element, without touching the HTML. For example, let’s add a red dot after .block:",{"id":601,"type":39,"data":602},"eRuOr1rGdG",{"code":603},".block {\n position: relative;\n}\n\n.block::after {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: red;\n position: absolute;\n transform: translateY(-50%);\n}",{"id":605,"type":29,"data":606},"Hi2GZ44RRY",{"text":607,"level":32},"CSS selector for hover :hover",{"id":609,"type":20,"data":610},"zR47l3TfjK",{"text":611},"This one is very common and lets us apply styles on hover. For example:",{"id":613,"type":39,"data":614},"gFt1Nq_cOz",{"code":615},".block:hover {\n color: red;\n}",{"id":617,"type":29,"data":618},"v-l24GfsZj",{"text":619,"level":32},"CSS selector for part of the text: ::first-line and ::first-letter",{"id":621,"type":20,"data":622},"Yrh3dziZ-D",{"text":623},"Sometimes you need to style only a portion of the element content.",{"id":625,"type":39,"data":626},"xbVwdmle17",{"code":627},"p::first-line {\n color: red;\n}",{"id":629,"type":20,"data":630},"xG2honHMio",{"text":631},"This will change only the first line of a paragraph.",{"id":633,"type":39,"data":634},"qE_HE9evzN",{"code":635},"p::first-letter {\n color: red;\n}",{"id":637,"type":20,"data":638},"KnuzdvkTok",{"text":639},"This will change only the first letter of a paragraph.",{"id":641,"type":20,"data":642},"w9fxy-CU9S",{"text":643},"That's all. Thanks for reading. Hope you found something useful and know more CSS selectors now.","/uploads/posts/2024/05/25/30-css-selectors-you-should-know.jpg",4,[647],{"_id":77,"name":78,"slug":79,"description":80,"types":648,"createdAt":82,"__v":83},[73],9,{"_id":651,"userId":9,"title":652,"slug":653,"description":654,"content":655,"thumbnail":702,"type":73,"views":74,"tags":703,"published":84,"createdAt":706,"updatedAt":706,"timeToRead":86,"__v":83},"661c06c799d47d3548ebf178","CSS animated gradient for background","css-animated-gradient-for-background","In this short tutorial, I'll show you how to create an animated gradient background using pure CSS. You can apply this CSS animated gradient for any element on your website.",{"html":656,"json":657},"\u003Cp>Hi everyone, welcome to my website. In this short tutorial, I'll show you how to create an animated gradient with CSS for background. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX\" target=\"_blank\" rel=\"nofollow\">CodePen\u003C/a> that I created, and copy, update or play with code.\u003C/p>\u003Ch2>Creating an animated gradient with CSS\u003C/h2>\u003Cp>Firstly, let's create an HTML element that will have an animated CSS gradient in the future. I'll create a \u003Ci>div\u003C/i> tag with \u003Ci>'gradient' \u003C/i>class, but you can apply this technique for any element on your website.\u003C/p>\u003Cpre>\u003Ccode><div class=\"gradient\"></div>\u003C/code>\u003C/pre>\u003Cp>Now let's deal with CSS part. The main idea behind this way of creating animated CSS gradient, is to create a bigger background than the element is. In my case, gradient will have a size of 400% of element. And then we will add animation, that will be moving this gradient through the element. Because of this moving, we will achieve gradient animation.\u003C/p>\u003Cpre>\u003Ccode>.gradient {\n height: 450px; /* Here you can use any size for element */\n width: 100%; /* Here you can use any size for element */\n background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);\n animation: gradient 2s infinite linear; /* 2s - speed of animation */\n background-size: 400%; /* You can play with this value to change intensity of the effect */\n}\n\n@keyframes gradient {\n 0% {\n background-position: 80% 0%;\n }\n 50% {\n background-position: 20% 100%;\n }\n 100% {\n background-position: 80% 0%;\n }\n}\u003C/code>\u003C/pre>\u003Cp>CSS code for animated gradient is very simple. The main difficulty for me personally, is to create nice looking gradient, pick right colors to make it looks fine. But you can make your life easier using CSS gradients generator, such \u003Ca href=\"https://cssgradient.io/\" target=\"_blank\" rel=\"nofollow\">as this one\u003C/a>.\u003C/p>\u003Cp>Thanks for reading! Hope this tutorial was helpful for you.\u003C/p>\u003Cdiv class=\"codepen-embed\">\n \u003Ciframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS animated gradient background on CodePen\" src=\"https://codepen.io/Nazarii-Semeniuk/embed/JjVBLNX?height=500&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\u003C/iframe>\n \u003C/div>",{"time":658,"blocks":659,"version":71},1713113968861,[660,664,668,672,676,680,684,688,692],{"id":661,"type":20,"data":662},"6RZ-1WL730",{"text":663},"Hi everyone, welcome to my website. In this short tutorial, I'll show you how to create an animated gradient with CSS for background. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX\" target=\"_blank\" rel=\"nofollow\">CodePen\u003C/a> that I created, and copy, update or play with code.",{"id":665,"type":29,"data":666},"lvdbDlVZjJ",{"text":667,"level":32},"Creating an animated gradient with CSS",{"id":669,"type":20,"data":670},"7Q1XhefDsK",{"text":671},"Firstly, let's create an HTML element that will have an animated CSS gradient in the future. I'll create a \u003Ci>div\u003C/i> tag with \u003Ci>'gradient' \u003C/i>class, but you can apply this technique for any element on your website.",{"id":673,"type":39,"data":674},"YJCzVHV0_f",{"code":675},"\u003Cdiv class=\"gradient\">\u003C/div>",{"id":677,"type":20,"data":678},"ch_RRlXBuS",{"text":679},"Now let's deal with CSS part. The main idea behind this way of creating animated CSS gradient, is to create a bigger background than the element is. In my case, gradient will have a size of 400% of element. And then we will add animation, that will be moving this gradient through the element. Because of this moving, we will achieve gradient animation.",{"id":681,"type":39,"data":682},"kNwqSeA1dA",{"code":683},".gradient {\n height: 450px; /* Here you can use any size for element */\n width: 100%; /* Here you can use any size for element */\n background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);\n animation: gradient 2s infinite linear; /* 2s - speed of animation */\n background-size: 400%; /* You can play with this value to change intensity of the effect */\n}\n\n@keyframes gradient {\n 0% {\n background-position: 80% 0%;\n }\n 50% {\n background-position: 20% 100%;\n }\n 100% {\n background-position: 80% 0%;\n }\n}",{"id":685,"type":20,"data":686},"PC3Qyi1J58",{"text":687},"CSS code for animated gradient is very simple. The main difficulty for me personally, is to create nice looking gradient, pick right colors to make it looks fine. But you can make your life easier using CSS gradients generator, such \u003Ca href=\"https://cssgradient.io/\" target=\"_blank\" rel=\"nofollow\">as this one\u003C/a>.",{"id":689,"type":20,"data":690},"ZryTrYz3CQ",{"text":691},"Thanks for reading! Hope this tutorial was helpful for you.",{"id":693,"type":694,"data":695},"IS3tDwzr7-","embed",{"service":696,"source":697,"embed":698,"width":699,"height":700,"caption":701},"codepen","https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX","https://codepen.io/Nazarii-Semeniuk/embed/JjVBLNX?height=300&theme-id=0&default-tab=css,result&embed-version=2",600,300,"CSS animated gradient background on CodePen","/uploads/posts/2024/04/14/css-animated-gradient-for-background.jpg",[704],{"_id":77,"name":78,"slug":79,"description":80,"types":705,"createdAt":82,"__v":83},[73],1712905880750,{"_id":708,"userId":9,"title":709,"slug":710,"description":711,"content":712,"thumbnail":774,"type":73,"views":775,"tags":776,"published":84,"createdAt":779,"updatedAt":779,"timeToRead":86,"__v":83},"6618da521cb6b57cf765f8db","Pure CSS pulse animation","pure-css-pulse-animation","In this short tutorial, I'm gonna to show you how to create a pulse effect for any website element using CSS. Pulse animation can create accent for an element. We will be using only pure CSS and HTML for it, no JavaScript knowledge needed.",{"html":713,"json":714},"\u003Cp>Hello everyone, welcome to my website. In this quick tutorial, I'll show you how to create CSS pulse animation for any element on your website. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/oNOyQGw\" target=\"_blank\" rel=\"nofollow\">codepen\u003C/a> that I created, and copy, update or play with code.\u003C/p>\u003Ch2>Creating CSS pulse effect\u003C/h2>\u003Cp>First thing first, let's create a simple HTML layout. All we need to do, is to create a wrapper around the element we want to add pulse animation. In my example, I'll add animation just for the image with my logo, so I'll wrap the image with \u003Cb><div>\u003C/b>. But you can make wrapper with \u003Cb><a> \u003C/b>or \u003Cb><button>\u003C/b> to add pulse animation for interactive elements.\u003C/p>\u003Cpre>\u003Ccode><div class=\"pulse\">\n <img class=\"pulse__image\" src=\"https://nazarii-semeniuk.com/images/logo.jpg\" alt=\"Logo\" />\n</div>\n\u003C/code>\u003C/pre>\u003Cp>Next, let's add some basic CSS styles just to style the image.\u003C/p>\u003Cpre>\u003Ccode>.pulse {\n position: relative; /* Will be needed in the future for animation */\n text-align: center; \n padding: 20px;\n border-radius: 50%;\n background: #EF3C50;\n width: 80px;\n height: 80px;\n}\u003C/code>\u003C/pre>\u003Cp>Next, we will style \u003Cb>::before\u003C/b> pseudo-element. This element will be animated. Basically, this element will be our \"effect\". During animation, we will simply change it's size and opacity.\u003C/p>\u003Cpre>\u003Ccode>.pulse::before {\n content: ''; /* We need this to display pseudo-element */\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}\u003C/code>\u003C/pre>\u003Cp>That's all. If you run this code right now, you will see the animation but only with one animating element. Let's make animation looks better.\u003C/p>\u003Ch2>CSS pulse animation: final code\u003C/h2>\u003Cp>To make animation better, let's do the same thing for ::after, as we did it for ::before. Also, we will add animation delay for one of this pseudo-element.\u003C/p>\u003Cpre>\u003Ccode>.pulse::after,\n.pulse::before {\n content: '';\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite; /* You can change properties here to tune animation */\n}\n\n.pulse::after {\n animation-delay: 1.25s;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}\u003C/code>\u003C/pre>\u003Cp>Thanks for reading! Hope this tutorial was helpful for you.\u003C/p>\u003Cdiv class=\"codepen-embed\">\n \u003Ciframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"My code for pure css pulse animation on codepen\" src=\"https://codepen.io/Nazarii-Semeniuk/embed/oNOyQGw?height=500&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\u003C/iframe>\n \u003C/div>",{"time":715,"blocks":716,"version":71},1713113818211,[717,721,725,729,733,737,741,745,749,753,757,761,765,768],{"id":718,"type":20,"data":719},"Ne1p22_QZg",{"text":720},"Hello everyone, welcome to my website. In this quick tutorial, I'll show you how to create CSS pulse animation for any element on your website. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/oNOyQGw\" target=\"_blank\" rel=\"nofollow\">codepen\u003C/a> that I created, and copy, update or play with code.",{"id":722,"type":29,"data":723},"MyZXUVHfla",{"text":724,"level":32},"Creating CSS pulse effect",{"id":726,"type":20,"data":727},"wBJr8j15nj",{"text":728},"First thing first, let's create a simple HTML layout. All we need to do, is to create a wrapper around the element we want to add pulse animation. In my example, I'll add animation just for the image with my logo, so I'll wrap the image with \u003Cb><div>\u003C/b>. But you can make wrapper with \u003Cb><a> \u003C/b>or \u003Cb><button>\u003C/b> to add pulse animation for interactive elements.",{"id":730,"type":39,"data":731},"HBJnt0qnUS",{"code":732},"\u003Cdiv class=\"pulse\">\n \u003Cimg class=\"pulse__image\" src=\"https://nazarii-semeniuk.com/images/logo.jpg\" alt=\"Logo\" />\n\u003C/div>\n",{"id":734,"type":20,"data":735},"pxJs_cn7na",{"text":736},"Next, let's add some basic CSS styles just to style the image.",{"id":738,"type":39,"data":739},"KQNe2ltz5S",{"code":740},".pulse {\n position: relative; /* Will be needed in the future for animation */\n text-align: center; \n padding: 20px;\n border-radius: 50%;\n background: #EF3C50;\n width: 80px;\n height: 80px;\n}",{"id":742,"type":20,"data":743},"aS80byzgUJ",{"text":744},"Next, we will style \u003Cb>::before\u003C/b> pseudo-element. This element will be animated. Basically, this element will be our \"effect\". During animation, we will simply change it's size and opacity.",{"id":746,"type":39,"data":747},"oyme-hXbxO",{"code":748},".pulse::before {\n content: ''; /* We need this to display pseudo-element */\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}",{"id":750,"type":20,"data":751},"noGLd10Hvx",{"text":752},"That's all. If you run this code right now, you will see the animation but only with one animating element. Let's make animation looks better.",{"id":754,"type":29,"data":755},"Gy6RBn3_jt",{"text":756,"level":32},"CSS pulse animation: final code",{"id":758,"type":20,"data":759},"psZdqSvc7a",{"text":760},"To make animation better, let's do the same thing for ::after, as we did it for ::before. Also, we will add animation delay for one of this pseudo-element.",{"id":762,"type":39,"data":763},"KpMgFAhVv_",{"code":764},".pulse::after,\n.pulse::before {\n content: '';\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite; /* You can change properties here to tune animation */\n}\n\n.pulse::after {\n animation-delay: 1.25s;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}",{"id":766,"type":20,"data":767},"IjJySBZb8J",{"text":691},{"id":769,"type":694,"data":770},"9gQ25iM2pa",{"service":696,"source":771,"embed":772,"width":699,"height":700,"caption":773},"https://codepen.io/Nazarii-Semeniuk/pen/oNOyQGw","https://codepen.io/Nazarii-Semeniuk/embed/oNOyQGw?height=300&theme-id=0&default-tab=css,result&embed-version=2","My code for pure css pulse animation on codepen","/uploads/posts/2024/04/12/pure-css-pusle-animation.jpg",243,[777],{"_id":77,"name":78,"slug":79,"description":80,"types":778,"createdAt":82,"__v":83},[73],1712603104173,{"message":5,"tags":781},[782],{"_id":77,"name":78,"slug":79,"description":80,"types":783,"createdAt":82,"__v":83},[73],["Reactive",785],{"$smodal":786,"$snotifications":788},{"name":787},null,[],["Set"],["ShallowReactive",791],{"posts-get-many-tutorial":-1,"tags-get-many-tutorial":-1},"/tutorials/"]