Get icon from image file - CSS

CSS to get Carret symbol

.carret{ display: inline-block; width: 0; height: 0; border-top: 10px solid; border-top: 4px solid \9; border-right: 10px solid transparent; border-left: 10px solid transparent; }

---

Use Image icon file, and get the required image by background-position

First icon from the image

Icon from the middle of image

.get-allicons{ background-image: url('https://www.bypeople.com/wp-content/uploads/2020/03/free-svg-icons-ui-development-1.png'); background-repeat: no-repeat; display: inline-block; vertical-align: sub; width: 45px; height: 45px; position: relative; top: 1px; vertical-align: middle; } .iconoff1{ background-position: -10px -10px; } .iconoff2{ background-position: -319px -1348px; }

CSS Tricks

 1) Custom input colour using the accent-colour property.

You can use the CSS property accent-colour to change the colour of your input element, and yes you can use input[type="inputType"] for selecting a specific input element based on its type.

<input type = "checkbox">

<input type = "radio">

<input type = "range">

CSS

input[type="checkbox"]{
   accent-color:lime;
}

input[type="radio"]{
   accent-color:red;
}

input[type="range"]{
   accent-color:blue;
}

2) Text cut-out using the mix-blend-mode property.

You can use the mix-blend-mode CSS property to cut out your text which gives your text a transparent look.

<div class = "container">

   <h1 class="text-cutout">CSS Tricks</h1>

</div>

CSS

.container{

   background-image: url("https://cutt.ly/nNnH6GG");

}

.text-cutout{

  background-color:#f1f1f1;

  border-radius:8px;

  padding:2rem 5rem;

  mix-blend-mode:screen;

}

3) Shadow effect for PNG images.

You might know that we can use the box-shadow property to give a shadow effect to any element, but when we use it on some image element which contains a transparent PNG image then sometimes you might want a different result than what box-shadow gives you. You can use the drop shadow CSS property to get a shadow effect on a PNG image.

<img class="image1" src="fish.png">

<img class="image2" src="fish.png">

CSS

.image1{

   box-shadow:5px 5px 5px #808080;

}

.image2{

   filter: drop-shadow(5px 5px 5px #808080);

}

Reference post

Image CSS property aspect-ratio, object-fit and mix-blend-mode

Three CSS properties will help you to display images

1) The aspect-ratio property maintains the aspect ratio of an element, even if its size changes.

2) Object-fit controls how an image or video is displayed within its container, allowing for versatile scaling and cropping options.

3) Mix-blend-mode creates stunning visual effects by blending the colors of overlapping elements.

These powerful techniques can elevate your website's design to the next level, impressing your visitors with visually stunning layouts.

<style> .photos img{ width: 15%; aspect-ration: 3/2; object-fit: contain; mix-blend-mode: color-burn; } </style>

Before

After

Resets CSS for all browser default values

 

The CSS code snippet below resets all browser default values and makes your CSS codes work in the same way in all browsers and neutralizes browser incompatibility.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ‘’; content: none; } /** * remember to define focus styles! */ :focus { outline: 0; } /** * remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /** * tables still need ‘cellspacing=”0"’ in the markup */ table { border-collapse: collapse; border-spacing: 0; }

Input type = number, remove the arrow at the end

Input type = number, remove the arrow at the end

Example:

Without class

With class

<style> .no-arrow::-webkit-outer-spin-button, .no-arrow::-webkit-inner-spin-button { -webkit-appearance: none; } </style> <input type="number" /> <input type="number" class="no-arrow" />

Style hr tag with CSS

The HTML <hr> tag represents a Horizontal-rule and its miles used for web page smash thru line. It creates a horizontal line, which makes a person recognize that there's a quit of the web page or a sentence smash.
We also can layout the hr (horizontal-rule) tag to create an appealing user interface.

Following are the 2 CSS style for reference

Style 1:

---

hr.style-1 { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); }

Style 2:

---

hr.style-2 { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

Style 3:

---

hr.style-3 { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.style-3:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }

Cheat Sheet - CSS, JQuery Selectors and Filters

*	All elements.
element	Basic selector defined by the elements name. IE – the <p> tag.
.class	Elements specified by a specific class attribute.
#id	Elements specified by the specific ID number.
selector1, selector2	Elements that match more than one selector.
:first	First element from the selection.
:last	Last element from the selection.
:even	Even index selection.
:odd	Odd index selection.
:not(selector)	Everything except the selector in parentheses.
:eq()	Elements with an index number equal to the parameter.
:gt()	Elements with an index number greater than the parameter.
:lt()	Elements with an index number less than the parameter.
:header	All h1 – h6 HTML tags.
:animated	Any element being animated.
:focus	The element which has focus (an input item such as a field, checkbox, button, or link).
:empty	Elements with no children.
:parent	Elements that have a child node.
:has(selector)	Elements contain atleast one of the elements that match the selector in parentheses.
:contains(‘text’)	Elements that contain the specified text in parentheses.
:hidden	Elements that are hidden.
:visible	Elements that exist and take up space in the layout of the page.
:nth-child(exp)	Elements that match the mathematical pattern. IE –  div :nth-child(2+1)
:first-child	First child from the current selection.
:last-child	Last child from the current selection.
:only-child	The only existing child of the matching element.
[attribute]	Elements that have the specified attribute value – IE – [name^ = “value”]
:input	Elements with input.
:text	Elements with text.
:password	Elements with password inputs.
:radio	Elements with radio buttons.
:checkbox	Elements with checkboxes.
:submit	Elements with submit buttons.
:image	Elements with images.
:reset	Elements with reset buttons.
:button	All buttons.
:file	Elements with file inputs.
:selected	All items from drop-down lists.
:enabled	All enables elements, including defaults.
:disabled	All disables elements.
:checked	All checked checkboxes or radio buttons.

If there’s anything that I’ve missed or more explanation that you’d like to see, feel free to leave a comment.

Help other's to help yourself !!

Fill element on hover

Create a button so that on hover the background color fills the element from left, right or center side of the element.

.button{ position: relative; display: inline-block; padding: 15px 70px; border: 5px solid #D42069; color: #D42069; font-size: 30px; font-family: arial; background-image: linear-gradient(#D42069, #D42069); background-repeat: no-repeat; border-radius:50px; transition: background-size .5s, color .5s; } .center-right-left, .center-top-bottom, .center-corner { background-position: 50% 50%; } .to-left { background-position: 100% 50%; } .to-right { background-position: 0% 50%; } .to-top { background-position: 50% 100%; } .to-bottom { background-position: 50% 0%; } .center-right-left, .to-left, .to-right { background-size: 0% 100%; } .center-top-bottom, .to-top, .to-bottom { background-size: 100% 0%; } .center-corner { background-size: 0% 0%; } .button:hover { background-size: 100% 100%; color: #fff; }

<h1> From center towards left and right</h1> <div class='button center-right-left'> NEXT</div> <h1> From center towards top and bottom</h1> <div class='button center-top-bottom'> NEXT</div> <h1> From center towards corners</h1> <div class='button center-corner'> NEXT</div> <h1> From right to left</h1> <div class='button to-left'> NEXT</div> <h1> From left to right</h1> <div class='button to-right'> NEXT</div> <h1> From bottom to top</h1> <div class='button to-top'> NEXT</div> <h1> From top to bottom</h1> <div class='button to-bottom'> NEXT</div>

OUT Put

From center towards left and right

NEXT

From center towards top and bottom

NEXT

From center towards corners

NEXT

From right to left

NEXT

From left to right

NEXT

From bottom to top

NEXT

From top to bottom

NEXT

Remove a specific class from all child elements, and add new class

$('#parentDiv').find("*").removeClass("old-class").addClass("new-class");

capitalize , lowercase, uppercase to HTML input Text

I have found number of JavaScript to convert text to upper while keypress. But the way we can use CSS is the best... capitalize , lowercase, uppercase

Css :
input.upper { text-transform: uppercase; } input.lower { text-transform: lowercase; } input.capital { text-transform: capitalize; }

Input Field Example.

UPPER CASE :
lower case :
Capital Case :