<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>css - HaiNH</title>
	<atom:link href="https://hainh.dev/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>https://hainh.dev</link>
	<description></description>
	<lastBuildDate>Wed, 28 Nov 2018 03:26:30 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://hainh.dev/wp-content/uploads/2025/10/cropped-logomyblog-32x32.png</url>
	<title>css - HaiNH</title>
	<link>https://hainh.dev</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">249252746</site>	<item>
		<title>Tạo hiệu ứng background cho website ấn tượng</title>
		<link>https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=tao-hieu-ung-background-cho-website-an-tuong</link>
					<comments>https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/#respond</comments>
		
		<dc:creator><![CDATA[NGUYỄN HOÀNG HẢI]]></dc:creator>
		<pubDate>Wed, 28 Nov 2018 03:26:30 +0000</pubDate>
				<category><![CDATA[Thiết kế website]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css effect]]></category>
		<category><![CDATA[website]]></category>
		<guid isPermaLink="false">https://hainh2k3.com/?p=1178</guid>

					<description><![CDATA[<p>Mình hay lang thang trang https://codepen.io để tìm các đoạn css, javascript hay để khi cần sử dụng và cũng có sưu tầm được một số hiệu ứng background cho website hay ho. Chúng ta thử ngó qua một số hiệu ứng mà mình thích nhất xem sao nhé, thường mình hay sử dụng chúng...</p>
<p>The post <a href="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/">Tạo hiệu ứng background cho website ấn tượng</a> first appeared on <a href="https://hainh.dev">HaiNH</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>Mình hay lang thang trang <a href="https://codepen.io" target="_blank" rel="noopener">https://codepen.io</a> để tìm các đoạn css, javascript hay để khi cần sử dụng và cũng có sưu tầm được một số hiệu ứng background cho website hay ho. Chúng ta thử ngó qua một số hiệu ứng mà mình thích nhất xem sao nhé, thường mình hay sử dụng chúng cho trang login hoặc các trang landing page.</p>
<h3><span style="color: #008000;">1. Bokeh effect (CSS)</span></h3>
<p><img fetchpriority="high" decoding="async" data-attachment-id="1181" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/bokeh-effect/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Bokeh-effect.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Bokeh effect" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Bokeh-effect-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Bokeh-effect.gif" class="aligncenter size-full wp-image-1181" src="https://hainh.dev/wp-content/uploads/2018/11/Bokeh-effect.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/Mamboleoo/pen/BxMQYQ" target="_blank" rel="noopener">https://codepen.io/Mamboleoo/pen/BxMQYQ</a></p>
<h3><span style="color: #008000;">2. Calm breeze login screen</span></h3>
<p><img decoding="async" data-attachment-id="1182" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/calm-breeze-login-screen/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Calm-breeze-login-screen.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Calm breeze login screen" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Calm-breeze-login-screen-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Calm-breeze-login-screen.gif" class="aligncenter size-full wp-image-1182" src="https://hainh.dev/wp-content/uploads/2018/11/Calm-breeze-login-screen.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/Lewitje/pen/BNNJjo" target="_blank" rel="noopener">https://codepen.io/Lewitje/pen/BNNJjo</a></p>
<h3><span style="color: #008000;">3. Tesselation Transition</span></h3>
<p><img decoding="async" data-attachment-id="1183" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/tesselation-transition/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Tesselation-Transition.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Tesselation Transition" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Tesselation-Transition-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Tesselation-Transition.gif" class="aligncenter size-full wp-image-1183" src="https://hainh.dev/wp-content/uploads/2018/11/Tesselation-Transition.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/jhnsnc/pen/Mprdaa" target="_blank" rel="noopener">https://codepen.io/jhnsnc/pen/Mprdaa</a></p>
<h3><span style="color: #008000;">4. CSS Particles</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1184" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/css-particles/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/CSS-Particles.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="CSS Particles" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/CSS-Particles-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/CSS-Particles.gif" class="aligncenter size-full wp-image-1184" src="https://hainh.dev/wp-content/uploads/2018/11/CSS-Particles.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/giana/pen/ZGZeWR" target="_blank" rel="noopener">https://codepen.io/giana/pen/ZGZeWR</a></p>
<h3><span style="color: #008000;">5. Random Pure CSS Parallax Stars</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1185" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/random-pure-css-parallax-stars/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Random-Pure-CSS-Parallax-Stars.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Random Pure CSS Parallax Stars" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Random-Pure-CSS-Parallax-Stars-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Random-Pure-CSS-Parallax-Stars.gif" class="aligncenter size-full wp-image-1185" src="https://hainh.dev/wp-content/uploads/2018/11/Random-Pure-CSS-Parallax-Stars.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/CKH4/pen/vNyyaL" target="_blank" rel="noopener">https://codepen.io/CKH4/pen/vNyyaL</a></p>
<h3><span style="color: #008000;">6. Bubbles (SVG)</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1186" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/bubbles-svg/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Bubbles-SVG.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Bubbles (SVG)" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Bubbles-SVG-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Bubbles-SVG.gif" class="aligncenter size-full wp-image-1186" src="https://hainh.dev/wp-content/uploads/2018/11/Bubbles-SVG.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/yukulele/pen/GppYjd" target="_blank" rel="noopener">https://codepen.io/yukulele/pen/GppYjd</a></p>
<h3><span style="color: #008000;">7. Particles #13 &#8211; Background with Hover</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1187" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/particles-13-background-with-hover/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Particles-13-–-Background-with-Hover.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Particles #13 – Background with Hover" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Particles-13-–-Background-with-Hover-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Particles-13-–-Background-with-Hover.gif" class="aligncenter size-full wp-image-1187" src="https://hainh.dev/wp-content/uploads/2018/11/Particles-13-–-Background-with-Hover.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/alexsafayan/pen/ypbch" target="_blank" rel="noopener">https://codepen.io/alexsafayan/pen/ypbch</a></p>
<h3><span style="color: #008000;">8. Three.js Particle Blown Up</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1188" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/three-js-particle-blown-up/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Three.js-Particle-Blown-Up.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Three.js Particle Blown Up" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Three.js-Particle-Blown-Up-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Three.js-Particle-Blown-Up.gif" class="aligncenter size-full wp-image-1188" src="https://hainh.dev/wp-content/uploads/2018/11/Three.js-Particle-Blown-Up.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/ryonakae/pen/wKqYxR" target="_blank" rel="noopener">https://codepen.io/ryonakae/pen/wKqYxR</a></p>
<h3><span style="color: #008000;">9. Portfolio Home Page</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1189" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/portfolio-home-page/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Portfolio-Home-Page.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Portfolio Home Page" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Portfolio-Home-Page-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Portfolio-Home-Page.gif" class="aligncenter size-full wp-image-1189" src="https://hainh.dev/wp-content/uploads/2018/11/Portfolio-Home-Page.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/j-w-v/pen/RrMLjV" target="_blank" rel="noopener">https://codepen.io/j-w-v/pen/RrMLjV</a></p>
<h3><span style="color: #008000;">10. Gradient color by HSL</span></h3>
<p><img loading="lazy" decoding="async" data-attachment-id="1190" data-permalink="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/gradient-color-by-hsl/" data-orig-file="https://hainh.dev/wp-content/uploads/2018/11/Gradient-color-by-HSL.gif" data-orig-size="800,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Gradient color by HSL" data-image-description="" data-image-caption="" data-medium-file="https://hainh.dev/wp-content/uploads/2018/11/Gradient-color-by-HSL-300x150.gif" data-large-file="https://hainh.dev/wp-content/uploads/2018/11/Gradient-color-by-HSL.gif" class="aligncenter size-full wp-image-1190" src="https://hainh.dev/wp-content/uploads/2018/11/Gradient-color-by-HSL.gif" alt="" width="800" height="400" /></p>
<p style="text-align: center;"><a href="https://codepen.io/wakamsha/pen/GpxJmg" target="_blank" rel="noopener">https://codepen.io/wakamsha/pen/GpxJmg</a></p>


<p>

&nbsp;Xem thêm tại đây :&nbsp;<a href="https://codepen.io/collection/ABNwxq/" target="_blank" rel="noreferrer noopener">https://codepen.io/collection/ABNwxq/</a></p><p>The post <a href="https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/">Tạo hiệu ứng background cho website ấn tượng</a> first appeared on <a href="https://hainh.dev">HaiNH</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://hainh.dev/tao-hieu-ung-background-cho-website-an-tuong/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1178</post-id>	</item>
	</channel>
</rss>
