Smiley CSS.

<style>

.smiley {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.smiley:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.smiley:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.smiley span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 10px;
    left: 25px;
}

.neutral {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.neutral:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.neutral:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.neutral span {
    height: 50px;
    width: 50px;
    border-bottom: 2px solid red;
    position: absolute;
    bottom: 20px;
    left: 25px;
}

.sad {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

.sad:before {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    left: 15px;
    top: 30px;
}

.sad:after {
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #000;
    right: 15px;
    top: 30px;
}

.sad span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-top: 2px solid red;
    position: absolute;
    bottom: -15px;
    left: 25px;
}

</style>



<div class="smiley"><span></span></div>
<br />
<div class="neutral"><span></span></div>
<br />
<div class="sad"><span></span></div>


Output :)

Creating rounded rectangle CSS

<style type="text/css">

div {
position: relative;
margin: 30px;
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
}
div:after, div:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
div:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}

</style>

<div></div>


Output :)

Clear icon inside input text CSS.

<style type="text/css">

.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 9px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 100px;
}
.search-box {
width: 80%;
border: 2px solid #aaa;
  outline: 0;
  border-radius: 15px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: pink;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}

</style>

<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Search anything here..." />
<button class="close-icon" type="reset"></button>
</form>
</div>


Output :)

1)

2)

Line of three segments colors html5 css3.

<style type="text/css">

div {
 position: relative;
 width: 430px;
 height: 40px;
 font-size: 27px;
 font-weight: bold;
 font-family: verdana;
}
div:after {
 content: '';
 left: 0;
 bottom: -3px;
 position: absolute;
 width: 100%;
 height: 4px;
 background: linear-gradient(to right, red, green, blue);
}

</style>

<div>This is CSS jQuery Blog.....</div>


Output :)

Chat like UI CSS.

<style type="text/css">

*{
font-size: 22px;
font-family: verdana;
}
.outer {
 display: block;
 clear: right;
}
.lbubble,
.rbubble {
 position: relative;
 padding: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 2px 2px 10px 0px #616161;
 box-shadow: 2px 2px 7px 0px #616161;
 display: inline-block;
 margin-bottom: 8px;
}
.lbubble {
 background: lightblue;
}
.rbubble {
 background: lightgreen;
 float: right;
}
.lbubble:after {
 content: "";
 position: absolute;
 top: 5px;
 left: -8px;
 border-style: solid;
 border-width: 10px 14px 10px 0;
 border-color: transparent lightblue;
 width: 0;
 z-index: 1;
}
.rbubble:after {
 content: "";
 position: absolute;
 top: 5px;
 right: -8px;
 border-style: solid;
 border-width: 10px 0 10px 14px;
 border-color: transparent lightgreen;
 width: 0;
 z-index: 1;
}

</style>


<div class='outer'>
<div class="rbubble">HIiiiiiiii, I am Right Bubble with align right</div>
</div>
<div class='outer'>
<div class="lbubble">Hiiiiiiiii, I am Left Bubble with align left</div>
</div>


Output :)

Moon Glowing Effect CSS.

<style type="text/css">

.sphere{
 position: relative;
 height:200px;
 width: 200px;
 background-color:red;
 border-radius:50%;
 text-align:center;
 vertical-align:middle;
 line-height: 200px;
 box-shadow: inset -10px -10px 100px #000,
             10px 10px 20px black,
             inset 0px 0px 10px black;  
 
}

.sphere::after, .sphere2::after{
 background-color: rgba(255,255,255,1);
 content:'';
 height: 40%;
 width: 10%;
 position:absolute;
 top:8%;
 left:14%;
 border-radius:50%;
 transform: rotate(45deg);
}


.sphere2 {
 height:200px;
 width: 200px;
 position: relative;
 background-color:yellow;
 border-radius:50%;
 text-align:center;
 vertical-align:middle;
 line-height: 200px;
 box-shadow: inset -10px -10px 100px #000,
             10px 10px 20px black,
             inset 0px 0px 10px black;  
 
}
.sphere2::after{
 background-color: rgba(255,255,255,0.5);
 content:'';
 position:absolute;
 border-radius:50%;
 transform: rotate(45deg);
}

</style>


<div class="sphere">CSS</div>
<div class="sphere2">
<div class="shine"></div>
    jQuery
</div>


Output :)

Arrow SVG

<style type="text/css">
html,
body {
 height: 100%;
 overflow: hidden;
}

body {
 background: rgb(17,123,189);
}

button {
 -webkit-appearance: none;
 background: transparent;
 border: 0;
 outline:0;
}

svg {
 padding: 5px;
}

.arrow {
 cursor: pointer;
 position: absolute;
 top: 50%;
 margin-top: -45px;
 margin-left: -35px;
 width: 70px;
 height: 90px;
}

.left {
 left: 42%;
}

.right {
 left: 58%;
}

.left:hover polyline,
.left:focus polyline {
 stroke-width: 3;
}

.left:active polyline {
 stroke-width: 6;
 transition: all 100ms ease-in-out;
}

.right:hover polyline,
.right:focus polyline {
 stroke-width: 3;
}

.right:active polyline {
 stroke-width: 6;
 transition: all 100ms ease-in-out;
}

polyline {
 transition: all 250ms ease-in-out;
}
</style>

<button class="arrow left">
  <svg width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
45.63,75.8 0.375,38.087 45.63,0.375 "/>
  </svg>
</button>
<button class="arrow right">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
0.375,0.375 45.63,38.087 0.375,75.8 "/>
  </svg>
</button>


Output :)