Back to Top

Tag Archives: website

8 Essential CSS Tips and Tricks Every Developer Should Know

8 Essential CSS Tips and Tricks Every Developer Should Know

Updated on by

Are you using these key CSS methods for a rapid workflow and a beautiful web design?

Every developer should know these CSS tricks to develop their projects quickly and efficiently. They’re sure to increase your productivity to the next level—let’s get started.

1. Hover Effects

You can add a hover effect to an HTML element using the :hover selector.

Example: Adding hover effect to a button element.

HTML Code:

<button>Hover Over Me</button>

CSS Code:

button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

You can play around with this code and add effects like fade-in, grow-in, skew, and so on. Make it your own!

 

CSS Fade-in Effect on Hover
button{
opacity:0.5;
}
button:hover{
opacity:1;
}
CSS Grow-in Effect on Hover
button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

2. Resize Images to Fit a div Container

You can resize an image to fit a div container using the height, width, and object-fit properties.

 

HTML Code:

<img class=”random-image” src=”https://picsum.photos/200/300″ />
CSS Code:

.random-image {
height: 100%;
width: 100%;
object-fit: contain;
}

3. Overriding all the Styles

You can override all other style declarations of an attribute (including inline styles) using the !important directive at the end of a value.

HTML Code:

<p class=”className” id=”idName” style=”background-color: orange;”>
Hello World!
</p>
CSS Code:

p {
background-color: yellow;
}
.className {
background-color: blue !important;
}
#idName {
background-color: green;
}
In this example, the !important rule overrides all other background-color declarations and ensures the background color will be set to blue rather than green.

 

4. Truncate Text With Ellipsis

You can truncate overflowing text with an ellipsis (…) using the text-overflow CSS property.

HTML Code:

<p class=”text”>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
</p>
CSS Code:

.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}

5. Using text-transform

You can force text to be uppercased, lowercased, or capitalized using the text-transform CSS property.

Uppercase

HTML Code:

<p class=”uppercase”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:

.uppercase {
text-transform: uppercase;
}

Lowercase

HTML Code:

<p class=”lowercase”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:

.lowercase {
text-transform: lowercase;
}
Capitalize
HTML Code:

<p class=”capitalize”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:

.capitalize {
text-transform: capitalize;
}

6. Using Single-Line Property Declaration

You can use the shorthand properties in CSS to make your code concise and easily readable.

For example, CSS background is a shorthand property that allows you to define the values of background-color, background-image, background-repeat, and background-position. Similarly, you can define properties for font, border, margin, and padding.

Single-Line Background Property Declaration
background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;
You can simplify the above declaration to a single line:

background: black url(images/xyz.png) no-repeat left top;
The shorthand properties are very convenient to use, but you need to consider some tricky edge cases (as outlined on MDN Web Docs) while using them.

 

7. Tooltips

Tooltips are a way to provide more information about an element when the user moves the mouse pointer over the element.

Right Tooltip
HTML Code:

<div class=”tooltip_div”>Right Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
Left Tooltip
HTML Code:

<div class=”tooltip_div”>Left Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
Top Tooltip
HTML Code:

<div class=”tooltip_div”>Top Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
Bottom Tooltip
HTML Code:

<div class=”tooltip_div”>Bottom Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
CSS Code:

body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
You can also use the Bootstrap library to create custom Bootstrap tooltips.

 

8. Add Shadow Effects

You can add CSS shadow effects to texts and elements using the text-shadow and the box-shadow CSS properties respectively.

CSS Text Shadow
The text-shadow CSS property adds shadows and layers to the text. The text-shadow property accepts a comma-separated list of shadows to be applied to the text.

Syntax of the text-shadow CSS Property:

/* You can use 4 arguments with the text-shadow CSS property:
offset-x, offset-y, blur-radius, and color */
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px red;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #18fa3e 1px 2px 10px;
Note: The color and blur-radius arguments are optional.

For example:

background: #e74c3c;
color: #fff;
font-family: lato;
text-shadow: 1px 1px rgba(123, 25, 15, 0.5), 2px 2px rgba(129, 28, 18, 0.51), 3px 3px rgba(135, 31, 20, 0.52), 4px 4px rgba(140, 33, 22, 0.53), 5px 5px rgba(145, 36, 24, 0.54), 6px 6px rgba(150, 38, 26, 0.55), 7px 7px rgba(154, 40, 28, 0.56), 8px 8px rgba(158, 42, 30, 0.57), 9px 9px rgba(162, 44, 31, 0.58), 10px 10px rgba(166, 45, 33, 0.59), 11px 11px rgba(169, 47, 34, 0.6), 12px 12px rgba(173, 48, 36, 0.61), 13px 13px rgba(176, 50, 37, 0.62), 14px 14px rgba(178, 51, 38, 0.63), 15px 15px rgba(181, 52, 39, 0.64), 16px 16px rgba(184, 54, 40, 0.65), 17px 17px rgba(186, 55, 41, 0.66), 18px 18px rgba(189, 56, 42, 0.67), 19px 19px rgba(191, 57, 43, 0.68), 20px 20px rgba(193, 58, 44, 0.69), 21px 21px rgba(195, 59, 45, 0.7), 22px 22px rgba(197, 60, 46, 0.71), 23px 23px rgba(199, 61, 47, 0.72), 24px 24px rgba(201, 62, 47, 0.73), 25px 25px rgba(202, 62, 48, 0.74), 26px 26px rgba(204, 63, 49, 0.75), 27px 27px rgba(206, 64, 49, 0.76), 28px 28px rgba(207, 65, 50, 0.77), 29px 29px rgba(209, 65, 51, 0.78), 30px 30px rgba(210, 66, 51, 0.79), 31px 31px rgba(211, 67, 52, 0.8), 32px 32px rgba(213, 67, 52, 0.81), 33px 33px rgba(214, 68, 53, 0.82), 34px 34px rgba(215, 69, 53, 0.83), 35px 35px rgba(216, 69, 54, 0.84), 36px 36px rgba(218, 70, 54, 0.85), 37px 37px rgba(219, 70, 55, 0.86), 38px 38px rgba(220, 71, 55, 0.87), 39px 39px rgba(221, 71, 56, 0.88), 40px 40px rgba(222, 72, 56, 0.89), 41px 41px rgba(223, 72, 57, 0.9), 42px 42px rgba(224, 73, 57, 0.91), 43px 43px rgba(225, 73, 57, 0.92), 44px 44px rgba(225, 73, 58, 0.93), 45px 45px rgba(226, 74, 58, 0.94), 46px 46px rgba(227, 74, 58, 0.95), 47px 47px rgba(228, 75, 59, 0.96), 48px 48px rgba(229, 75, 59, 0.97), 49px 49px rgba(230, 75, 59, 0.98), 50px 50px rgba(230, 76, 60, 0.99);
CSS Box Shadow
The box-shadow property is used to apply a shadow to HTML elements.

Syntax of the box-shadow CSS property

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Note: The blur, spread, and color parameters are optional.

For example:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
If you want to have a look at the complete source code used in this article, here’s the GitHub repository.

Style Your Website Using Modern CSS Tricks
Adding CSS text shadows to a website is a great way to draw the attention of the users. It can give the website a certain elegance and a unique feel. Get creative and experiment with some text-shadow examples that may align with the theme of your website.

 

Original article by Yuvraj Chandra can be found here

11 Useful HTML Attributes You Must Know

11 Useful HTML Attributes You Must Know

Updated on by

HTML attributes allow you to perform a lot more complex tasks directly on your HTML files. Here are some of the most useful ones to know!

HTML is the building block of the web. Knowing some less-known, but useful parts of this markup language can make your life a lot easier. HTML attributes provide several features that can help you to get the most out of HTML. It defines additional characteristics or properties of an HTML element.

 

In this article, you’ll learn about 11 HTML attributes that you probably haven’t heard of yet.

 

1. multiple

This attribute allows users to enter multiple values. You can use the multiple attribute with <input> tags and <select> tags. This boolean attribute is valid only for email or file input types.

Using multiple Attribute With <select> Tag

<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>

Using multiple Attribute for File Input

By using the multiple attribute for file input, you can select multiple files (by holding the Shift or Ctrl keys).

<input type="file" multiple>

Using multiple Attribute for Email Input

By using the multiple attribute for email input, you can enter a list of comma-separated email addresses. All the white spaces will be removed from each address in the list.

 
<input type="email" multiple>
 

2. contenteditable

You can make the HTML content editable on a web page using the contenteditable attribute. This is a global attribute, i.e, it’s common to all HTML elements.

<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
 

3. spellcheck

The spellcheck attribute specifies whether the element may be checked for spelling errors or not. You can spellcheck text in the <textarea> elements, text in the editable elements, or text in the input elements(except passwords).

 
<p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
 

4. download

You can download a resource using the download attribute. The download attribute tells the browser to download the specified URL instead of navigating to it. You can use the download attribute with <a> tag and <area> tag.

Note: The download attribute only works with same-origin URLs. It follows the rules of the same-origin policy.

 
<a href="xyz.png" download="myImage">Download</a>
 

5. accept

The accept attribute of the <input> tag specifies the type of files a user can upload. You can specify a comma-separated list of one or more file types as its value.

Accepting an Audio File

<input type="file" id="audioFile" accept="audio/*">

Accepting a Video File

<input type="file" id="videoFile" accept="video/*">

Accepting an Image File

<input type="file" id="imageFile" accept="image/*">

Accepting a Microsoft Word File

<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
 

Accepting PNG or JPEG Files

<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

Accepting a PDF File

<input type="file" id="pdfFile" accept=".pdf">

 

 

6. translate

The translate attribute tells the browser that the element should be translated or not when the page is localized. It can have 2 values: “yes” or “no”.

<p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
 
 

7. poster

The poster attribute is used to show an image while the video is downloading or until the user plays the video.

Note: If you don’t specify anything, nothing is displayed until the first frame is available. When the first frame is available, it’s shown as the poster frame.

<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
 

8. inputmode

The inputmode attribute indicates the browser which keyboard to display when a user has selected any input or textarea element. This attribute accepts various values:

 

None

<input type="text" inputmode="none" />

Numeric

<input type="text" inputmode="numeric" />

Tel

<input type="text" inputmode="tel" />

Decimal

<input type="text" inputmode="decimal" />

Email

<input type="text" inputmode="email" />

URL

<input type="text" inputmode="url" />
<input type="text" inputmode="search" />
 

9. pattern

The pattern attribute of the <input> element allows you to specify a regular expression for which the element’s value will be validated against. You can use the pattern attribute with several input types like text, date, search, URL, tel, email, and password.

 
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>
 

10. autocomplete

The autocomplete attribute specifies whether the browser should automatically complete the input based on user inputs or not. You can use the autocomplete attribute with several input types like text, search, URL, tel, email, password, date pickers, range, and color. You can use this attribute with the <input> elements or <form> elements.

<input name="credit-card-number" id="credit-card-number" autocomplete="off">
 

11. autofocus

The autofocus attribute is a boolean attribute indicating that an element should be focused on page load. You can use this attribute with <button><input><keygen><select>, or <textarea> elements.

 

Using autofocus Attribute With input Element

<input type="text" autofocus>

Using autofocus Attribute With select Element

<select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>

Using autofocus Attribute With textarea Element

<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>




Full article by YUVRAJ CHANDRA can be found here