Saturday, 18 February 2017

CSS Image Formatting


Image Formatting CSS





<img src="girfa.jpg" style="margin-left:20px;border-radius: 8px;"/>



<img src="girfa.jpg" style="border-radius: 50%;"/>




<img src="girfa.jpg" class="thumb h" />


.thumb {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-left:30px;
     margin-top:30px
}

img.h:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}


<img src="girfab.jpg" style="max-width: 100%; height: auto;"  />


Norway
Girfa : Student Help



<div class="canvas">
  <img src="girfa.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Girfa : Student Help</p>
  </div>

</div>

div.canvas {
  width:500px;
  background-colorwhite;
  box-shadow0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom25px;
}

div.container {
  text-aligncenter;
  padding10px 20px;
}


<img src="girfa.jpg" style="opacity: 0.5;" />



<img src="girfa.jpg" class="blur" />
.blur
{
-webkit-filter: blur(4px);filter: blur(4px);
}




<img src="girfa.jpg" class="sepia" />

.sepia
{-webkit-filter: sepia(100%);filter: sepia(100%);

}




<img src="girfa.jpg" class="shadow" />

.shadow
{
-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);

}