Showing posts with label Css3. Show all posts
Showing posts with label Css3. Show all posts

Thursday, May 30, 2019

Custom Checkbox Css with and without label



Demo

HTML for checkbox is

With Label

<div class="boxes withlabel">
  <input type="checkbox" id="rj-1">
  <label for="rj-1">Hello World</label>

  <input type="checkbox" id="rj-2" checked>
  <label for="rj-2">RJ Code for every one </label>

  <input type="checkbox" id="rj-3">
  <label for="rj-3">Checkbox with label</label>
</div>


With out Label

<div class="boxes without">
  <input type="checkbox" id="box-1">
  <input type="checkbox" id="box-2" checked>

  <input type="checkbox" id="box-3">
</div>

CSS

/* With label Checkboxes styles*/

.withlabel input[type="checkbox"] { display: none; }

.withlabel input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.withlabel input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.withlabel input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.withlabel input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* With out Checkboxes styles*/

.without input[type="checkbox"] {
  display: block;
  position: relative;
  margin-bottom: 20px;
  width:0;
  cursor: pointer;
}

.without input[type="checkbox"]:last-child { margin-bottom: 0; }

.without input[type="checkbox"]:before {
  content: '';
  background:#F46A4A;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.without input[type="checkbox"]:checked:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

Enjoy Comments are welcome :)

Monday, July 31, 2017

Fixed: input type number spinner hide

Remove input number arrows firefox


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}

Wednesday, April 27, 2016

CSS multiline text with ellipsis

HTML

<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>


Css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}
h2 {
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 145.6px;
  /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Sunday, June 22, 2014

how to Make (get) screen 100% height in css

There are many ways to make the height of your HTML elements to be exactly as the height of the browser screen, regardless of the screen resolution, browser, device, etc. Many of these options use JavaScript to find out the height of the window. But there’s a way to do this with pure CSS only.
What is Viewport-Percentage (or Viewport-Relative) Lengths?
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
So, by using viewport-percentage lenghts, HTML elements adjust automatically when the height or width of the screen changes.
There are a few options you may find useful:
  • vh (viewport height)
  • vw (viewport width)
  • vmin (viewport minimum length)
  • vmax (viewport maximum length)

Here’s just a simplified code example of the HTML:
and here’s the CSS using vh:

div#welcome {
height: 100vh;
background: black;
}

div#projects {
height: 100vh;
background: yellow;
}

Enjoy Comments are welcome !!

Tuesday, March 4, 2014

Background Origin in CSS

The default for background-origin is  padding-box. This means the background applies to the area containing the padding but not to the area containing the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: padding-box;
}


This sample image is scaled to fill its container and set not to repeat.

Setting the origin to border-box means that the background will now extend out under the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: border-box;
}

Multiple Background in CSS3

Hi 
Adding multiple background images is simply a matter of listing them, along with any relevant attributes, separated by commas in the background property:


background: top right
  url('pitr-head.png') no-repeat,
 bottom right
  url('aj-head.png') no-repeat,
 top left
  url('mike-head.png') no-repeat,
 bottom left
  url('sid-head.png') no-repeat;


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9+, Firefox 3.6+, Opera 10.5+, Chrome 7+, and Safari 3+ support the <canvas> element.


Tuesday, February 25, 2014

CSS3 :nth-child() Selector

Hi this si css selector for li

li:nth-child(2n)
{
background:#ff0000;
}

Selector Exp 
li:nth-child(odd)
li:nth-child(even)
li:nth-child(3n+0)
li:first-child

after and before

li:after
li:before

Friday, February 14, 2014

CSS3 Transitions, Animation

Hi !

There is some css code for reference of Css3 transitions, animations

div
{
width:100px;
height:100px;
background:red;
transition:width 2s; /* use transition artibute name and animation time  */
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}

Thanks :)