Menu ▼

Home / blogs / CSS /

CSS Cursors

CSS Cursors : Demo Preview

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

CSS Cursors : CSS and HTML Code


.auto            { cursor: auto; }
.deafult         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

.cursorsClass > div {
   float: left;
   box-sizing: border-box;
   width: 20%;
   padding: 10px 2px;
   text-align: center;  
   white-space: nowrap;
   &:nth-child(even) {
      background: #fdf9bc;     
   }
   &:nth-child(odd) {
      background: #f28214;     
   }
   &:hover {
      opacity: 0.5;
      background: red;
     color: #fff;
   }
}

<div class="cursorsClass">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>
Read More...
Submited By : DesignIsBack On 23 Feb 2015

Simple Tooltip CSS Code Using Pure CSS3 with Fade-In and Fade-Out Animation Effect

Preview:

Touch Me

I am a beautiful tooltip!

Source Code:

<head>
<style>
.wrapper {
    text-transform: uppercase;
    background: red;
    color: #fff;
    cursor: help;
    font-family: arial;
    font-size: 25px;
    margin: 100px 75px 10px 75px;
    padding: 15px 20px;
    position: relative;
    text-align: center;
    width: 200px;
    -webkit-transform: translateZ(0); /* webkit flicker fix */
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.wrapper .tooltip {
    background: green;
    bottom: 100%;
    color: #fff;
    display: block;
    left: -25px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    width: 100%;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 -ms-transition: all .25s ease-out;
 -o-transition: all .25s ease-out;
 transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}
/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid green 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0;
}
.wrapper:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
    display: none;
}
.lte8 .wrapper:hover .tooltip {
    display: block;
}
</style>
</head>
<body>
<div>
  <div class="wrapper"> Touch Me
    <div class="tooltip"><img src="http://www.dotnetlearners.com/images/logo.jpg" /> <br />
      I am a beautiful tooltip! </div>
  </div>
</div>
</body>

Read More...
Submited By : DesignIsBack On 18 Feb 2015

Preview

Progress Bar
%

Implement Progress Bar Code using CSS3

        <style>
#prbar {
    margin:10px 5px;
    width:200px;
    background-color:#008;
    overflow:hidden;
    
    /* Rounded Border */
    border: 1px solid #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
            
    /* Adding some shadow to the progress bar */
    -webkit-box-shadow: 0px 2px 4px #555555;
    -moz-box-shadow: 0px 2px 4px #555555;
    box-shadow: 0px 2px 4px #555555;            
}
        
/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, #prbar {
  border-radius:0px;
}
        
#prpos {
    width:0%;
    height:30px;
    background-color:#3399ff;
    border-right:1px solid #bbbbbb;
           
    /* CSS3 Progress Bar Transitions */
    transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 0s ease;
    -ms-transition: width 0s ease;
   
    /* CSS3 Stripes */
    background-image: linear-gradient(135deg,#0099ff 25%,#00ccff 25%,#00ccff 50%, #0099ff 50%, #0099ff 75%,#00ccff 75%,#00ccff 100%);
    background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
    background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
    background-size: 40px 40px;

    /* Background stripes animation */
    animation: bganim 3s linear 2s infinite;
    -moz-animation: bganim 3s linear 2s infinite;
    -webkit-animation: bganim 3s linear 2s infinite;
    -o-animation: bganim 3s linear 2s infinite;
    -ms-animation: bganim 3s linear 2s infinite;
}
        
@keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-moz-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-webkit-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-o-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}
@-ms-keyframes bganim {
    from {background-position:0px;} to { background-position:40px;}
}

</style>

    
<script>

function MoveTo() {
  var prpos = document.getElementById('prpos');
  prpos.style.width = document.getElementById('moveTo').value + "%";
}

$(document).ready(function() {
  MoveTo();
});
</script>
</head>

<body>

  <div id="prbar">
  <div id="prpos">
  </div>
</div>
Enter
<input id="moveTo" value="90" style="width:100px;" />% 
<button onclick="MoveTo();return false;">Start</button>

</body>
Read More...
Submited By : DesignIsBack On 17 Feb 2015

With CSS 3 now we can animate background gradients in all angles with custom colors.

In the below example, you can view the linear gradient flowing light blue to dark black from top to bottom.

The text "Animated Background using Pure CSS 3" can be seen fading in the background color in 10-20 seconds.

Preview

tooltip

Animated Background using Pure CSS 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
    height: 100vh;
}
#container {
    min-width: 100%;
    min-height: 100%;
    text-align: center;    
    background: linear-gradient(0deg, #00FFFF, #0000FF, #000000);
    background-size: 300% 300%;
    -webkit-animation: MoveBG 10s ease infinite;
    -moz-animation: MoveBG 10s ease infinite;
    -o-animation: MoveBG 10s ease infinite;
    animation: MoveBG 10s ease infinite;
}

@-webkit-keyframes MoveBG {
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}

@-moz-keyframes MoveBG {
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}
@-o-keyframes MoveBG {
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}
@keyframes MoveBG { 
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}
</style>
</head>
<body>
<div id="container">
    <h1>Animated Background using Pure CSS 3</h1>
</div>
</body>
</html>

Read More...
Submited By : DesignIsBack On 22 Jan 2015
Simple animation to replace .GIF images for Spinners and Loaders.

Output:

Here you go for the code using single class for a DIV tag

   <div class="spinner">Loading...</div>

Here is the list of Code written in SCSS (Symantic CSS)

$circleDiam: 20px;
$innerCircleDiam: $circleDiam/3;
$rotatingCircleDiam: $circleDiam/5;

$innerCirclePos: ($circleDiam - $innerCircleDiam)/2;
$rotatingCirclePosLeft: ($circleDiam - $innerCircleDiam)/2 - $rotatingCircleDiam;
$rotatingCirclePosTop: $circleDiam/2 - $rotatingCircleDiam/2;

.spinner {  
  text-indent: 999em;
  width: $circleDiam; 
  height: $circleDiam;
  position: fixed;
  top: 50%; left: 50%;
  margin: -$circleDiam/2; 
  background-color: #888;
  box-shadow: 0 2px 1px rgba(0,0,0,.3) inset;
  border-radius: 50%;

  &:after {
    content: '';
    position: absolute;
    top: $rotatingCirclePosTop; 
    left: $rotatingCirclePosLeft;
    background-color: #fff;
    height: $rotatingCircleDiam; 
    width: $rotatingCircleDiam;    
    animation: spin 1s linear infinite;
    border-radius: 50%;
    transform-origin: $innerCirclePos/2 + $rotatingCircleDiam;  
  }
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}
Read More...
Submited By : DesignIsBack On 17 Dec 2014
  1. Semantic UI - MIT
  2. Bootstrap - MIT
  3. Foundation - MIT
  4. UIkit - MIT
  5. 960 Grid System - GPL+MIT
  6. Skeleton - MIT
  7. 99lime HTML KickStart - MIT
  8. Kube - Open Source
  9. Less Framework - MIT
  10. Flaminwork - Open Source
  11. G5 Framework - Open Source
  12. Easy Framework - CC
  13. Blueprint - MIT
  14. YAML - CC-BY
  15. BlueTrip - Open Source
  16. YUI CSS - BSD License
  17. Elements - Open Source
  18. 52framework - CC
  19. elastiCSS - MIT
  20. Boilerplate - New BSD
  21. Emastic - Open Source
  22. Malo - MIT
  23. The Golden Grid - MIT
  24. 1kb grid - Open Source
  25. Fluid 960 Grid System - GPL/MIT
  26. Baseline - CC
  27. Lovely CSS Framework - MIT
  28. xCSS - MIT
  29. FEM CSS Framework - MIT/GPL
  30. Helium - Apache v2.0
  31. Knacss - Open Source
  32. Groundwork CSS - MIT
  33. Gumby - MIT
  34. Unsemantic - MIT/GPL
  35. Seelva - Apache 2.0
  36. Tuktuk - MIT
  37. Maple - MIT
  38. Fluidable - CCO
  39. Ink - MIT
  40. Kickoff - MIT
  41. Cascade Framework - MIT
  42. Cascade Framework Light - MIT
  43. Metro UI CSS 2.0 - MIT
  44. Jeet - GPL
  45. Responsive Boilerplate - MIT
  46. Susy - Open Source
  47. Inuit.css - Apache v2.0
  48. Topcoat - Apache v2.0

I suggest Bootstrap and 960Grid which were so easy to construct a web application in less time.

Above content has been gathered from different online websites and made a list for Web designers and developers
Read More...
Submited By : DesignIsBack On 11 Sep 2014
By using the option tr:nth-child(even) / tr:nth-child(odd) in CSS we can set the grid / table alter native row background color. below is the sample css for alternative row background color.

CSS Example :

<style type="text/css">

    .grid

    {

        width:500px;

    }

    .grid th

    {

        background-color:Green;

        color:#ffffff;

    }

    .grid tr:nth-child(even)

    {

        background-color:#ffffff;

    }

    .grid tr:nth-child(odd)

    {

        background-color:#cccccc;

    }

    .grid td

    {

        padding-left:10px;

    }

</style>


GridView :

<asp:GridView ID="gv" runat="server" CssClass="grid">

</asp:GridView>

 

Output :


Read More...
Submited By : mrkraju On 17 Mar 2014
By using CSS3 property border-radius we can make the control border curve or circle, the below example will let you know how to do that.


       
       
       
       
   












Source Code :

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div style="border-radius: 25px;height: 200px;width: 200px;margin: 10px;background: green;float:left;">

        </div>

        <div style="border-radius: 100px;height: 200px;width: 200px;margin: 10px;background: orange;float:left;">

        </div>

    </div>

    </form>

</body>

</html>

 

Read More...
Submited By : mrkraju On 27 Nov 2013




Search dotnetlearners.com