Cursor

The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality. So try not to break that affordance =).

Codepen live

Shapes of css

Square using css

#square { width: 100px; height: 100px; background: red; }

Rectengle

#rectengle { background: red; height: 100px; width: 200px; }

Circle

#circle { background: red; border-radius: 50%; height: 100px; width: 100px; }

Triangle up

#triangle_up { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red; }


More....

::after / ::before

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after { content: "hi"; }

<!-- Rest of stuff inside the div -->
<div> hi </div>

Give your multiple background canvases

Transparent circle using css.

jsfiddle

Positive Thinking

No negative thought allowed.

• Reduces daily stress.
• You get a better health.
• A strong confidence.
• Live a longer life.
• Live a happier life
• You will have more friends.
• Better management of important decision.

How to apply positive thinking.

Use positive words when talking. If you constantly say “I can not” you could convince yourself that it’s true. Replace negative words with positive ones. Tell yourself that you do everything possible to have a happy relationship, tell yourself that you do everything possible to have a brilliant career, tell yourself that you do everything possible to keep you in shape.


Remove all the feelings that are not positive! Do not let negative thoughts and feelings conquer when you have a bad mood. Even if for a few hours a day, remove negativity and focus on the positive things in your life.


Use words that evoke strength and success. Fill your thoughts with words that make you feel strong, happy, having control over your life. Make an effort to focus on these words rather than the ones that suggest failure or incompetence.


Practice positive affirmations. One of the most common exercises for a positive thinking is positive affirmation. What does that mean? Start repeating a positive phrase like “I deserve to be happy” or “I deserve to be loved.” Believing that these statements are true and repeating them always will impose a more positive opinion about your life.

12 little css facts

1. The border-radius property can use "Slash" syntax. 
2. border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
3. The font-weight property accepts relative keywords.
4. There is an outline-offset property.
5. There is an table-layout property.
6. The vertical-align property works differently on table cell vs. Other elements.
7. The ::first-letter pseudo-element is smarter than you think.
8. You can use invalid characters as delimiters in your HTML class lists.
9. Animation shorthand can break because of the animation's name.
10. You can select ranges of elements.
11. Pseudo-element can be applied ot some void elements.
12. Some attribute values are case insensitive in selectors.

More

Corner shaping mixin using stacked gradients

<nav>

  <a href="#" class="btn corner-1">Corner Scoop</a>
  <a href="#" class="btn corner-2">Corner Bevel</a>
  <a href="#" class="btn corner-3">Corner Notch</a>
</nav>




@mixin corners($shape, $size, $color) {

  $n1: $size+px;
  $n2: ($size)*2+px;
  $n3: $size+1+px;
  $pn: 0%;
  @if ($size <= 10) { $pn: 6%; }
  @elseif ($size <= 15) { $pn: 5%; }
  @elseif ($size <= 20) { $pn: 4%; }
  @elseif ($size <= 40) { $pn: 3%; }
  @elseif ($size <= 50) { $pn: 2%; }
  @elseif ($size <= 60) { $pn: 1%; }
  $pd-scoop: 64%+$pn;
  
  @if ($shape == "bevel") {
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left,
          linear-gradient(135deg,  transparent 49%, $color 50% ) no-repeat top left,
          linear-gradient(-135deg, transparent 47%, $color 48% ) no-repeat top right,
          linear-gradient(45deg,   transparent 47%, $color 48% ) no-repeat bottom left,
          linear-gradient(-45deg,  transparent 46%, $color 47% ) no-repeat bottom right;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2}), $n3 $n3, $n3 $n3, $n3 $n3, $n3 $n3;
  }
  
  @if ($shape == "scoop") {
    $t-t: t t; // compiler bug hack
    $t-b: t b; // compiler bug hack
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left,
          radial-gradient(a+$t-t+op left,     transparent 64%, $color $pd-scoop ) no-repeat top left,
          radial-gradient(a+$t-t+op right,    transparent 64%, $color $pd-scoop ) no-repeat top right,
          radial-gradient(a+$t-b+ottom left,  transparent 64%, $color $pd-scoop ) no-repeat bottom left,
          radial-gradient(a+$t-b+ottom right, transparent 64%, $color $pd-scoop ) no-repeat bottom right;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2}), $n3 $n3, $n3 $n3, $n3 $n3, $n3 $n3;
  }
  
  @if ($shape == "notch") {
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2});
  }
  
}

.corner-1 {
  transition: all 0.3s;
  @include corners('scoop', 10, #770000);
  &:after {
    transition: all 0.3s;
    @include corners('scoop', 10, #330000);
  }
  &:hover {
    @include corners('scoop', 27, #990000);
    &:after { @include corners('scoop', 27, #330000); }
  }
}

.corner-2 {
  transition: all 0.3s;
  @include corners('bevel', 16, #007700);
  &:after {
    transition: all 0.3s;
    @include corners('bevel', 16, #003300);
  }
  &:hover {
    @include corners('bevel', 40, #009900);
    &:after { @include corners('bevel', 40, #003300); }
  }
}

.corner-3 {
  transition: all 0.3s;
  @include corners('notch', 5, #0055cc);
  &:after {
    transition: all 0.3s;
    @include corners('notch', 5, #002266);
  }
  &:hover {
    @include corners('notch', 15, #0077ee);
    &:after { @include corners('notch', 15, #002266); }
  }
}

.btn {
  display: inline-block;
  padding: 20px 30px 16px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: #fff;
  text-decoration: none;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 4px;
    left: 0;
    z-index: -1;
  }
}

nav {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -40px;
  width: 100%;
  text-align: center;
}

More...

Selector level 4

:read-only and :read-write

These selectors are pretty straightforward. Any element that’s editable by the user is in the “read-write” state. Otherwise, the element is in the “read-only” state.

jsfiddle

More