Browsing Category

Front-end

CSS, Front-end, Front-end Develop

CSS selector reference

May 8, 2018

Selectors are not new to CSS3. It already exists from CSS1, and is an extremely important part of CSS. Initially, CSS1 only included about 7 selectors, then it was expanded to include about 12 new CSS2, and then continue to improve in CSS3

CSS selectors can be divided into three main categories, temporary packages such as DOM Selectors, Pseudo Selectors, and Combinators.

Selector Example Example description
.class .intro Selects all elements with class=”intro”
#id #firstname Selects the element with id=”firstname”
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target=”_blank”
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word “flower”
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with “en”
[attribute^=value] a[href^=”https”] Selects every <a> element whose href attribute value begins with “https”
[attribute$=value] a[href$=”.pdf”] Selects every <a> element whose href attribute value ends with “.pdf”
[attribute*=value] a[href*=”w3schools”] Selects every <a> element whose href attribute value contains the substring “w3schools”
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it” (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no “required” attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the “readonly” attribute specified
:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified
:required input:required Selects input elements with the “required” attribute specified
:root :root Selects the document’s root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links
CSS, Front-end, Front-end Develop

How to split columns, create dropcap with css

April 17, 2018

In some books or documents, you will see paragraphs or columns of printed text and occupy a few lines of text. You like it and want your text to have that but do not know how? This article will introduce you to two functions: split column and print the big letter (called Drop Cap)

How to declare columns.

There are three different ways to declare columns:

  1. Declare column-count.
  2. Declare column-width.
  3. Declare both (recommended).

Let’s explore the different ways to declare columns.

Example (Declare column-count) :

div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

Example (Declare column-width.)

div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}

Example (Declare both (recommended).

article {

-webkit-columns: 2 200px;

-moz-columns: 2 200px;

columns: 2 200px;

}

/* or */

article {

-webkit-column-count: 2;

-moz-column-count: 2;

column-count: 2;

-webkit-column-width: 200px;

-moz-column-width: 200px;

column-width: 200px;

}

Customizing columns

There are several properties to further customize CSS columns.

  • column-fill : property specifies how to fill columns, balanced or not.
  • column-gap : property specifies the gap between the columns.
  • column-rule :  property sets the width, style, and color of the rule between columns.
  • column-span:  property specifies how many columns an element should span across.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

  • Chomre: 0 4.0 -webkit-
  • Internet Explorer / Edge : 0
  • Firefox: 0 2.0 -moz-
  • Safari: 0 3.1 -webkit-
  • Opera: 0 15.0 -webkit 11.1

Create dropcap:

There are Two different ways to declare create drop caps:

  1. Using ::first-lettet : The ::first-letter selector is used to add a style to the first letter of the specified selector, but no IE < 9 support.

Example :

p:first-child:first-letter {

color: #903;

        font-family: Georgia;

        initial-letter: 2;

}

  1. j ust wrap the first character of the paragraph in a span, then target the span with CSS and style away.

Example :

<p><span class=”firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur adipiscing elit.</p>

.firstcharacter {

  color: #903;

  float: left;

  font-family: Georgia;

  font-size: 75px;

  line-height: 60px;

  padding-top: 4px;

  padding-right: 8px;

  padding-left: 3px;

}

Demo: https://jsfiddle.net/TrinhThang/6mjorye7/9/

Front-end, Front-end Develop

New Features of HTML 5.1

April 5, 2018

In November 2015, W3C began working on a draft of HTML5.1 aimed at fixing some of the issues of HTML5. After several releases, it reached the “Candidate Recommendation” status in June 2016, “Proposed Recommendation” in September 2016 and finally “W3C Recommendation” in November 2016. Those who watch this development may find this a bumpy ride. Many of the original features of HTML5.1 have been removed due to poorly designed or lack of support from web browser developers.

  1. Context menu use menu and menuitems element

    The HTML5.1 draft utilizes two different kinds of menu elements, context and toolbar. The menu context menu is normally displayed by right-clicking on the page. During the time spent advancement, toolbar was dropped, however the context menu still remains.

    Every menu item can have:

    checkbox allows you to choose or deselect a choice.

    command allows you perform the onclick action.

    Radio allows you to choose a choice from a gathering.

    Here is an essential case of working with FireFox 49 however does not appear to help Chrome 54

  2. Detail and Summary element

    detail and summary elements use to show and hide infomation by clicking on an element. You don’t need JS. Clicking on the summary toggles show/hide content from the detail element.

  3. More input type – month, week, datetime-local

    week and month allows you to choose a week or a month. With Chrome, both of theme are displayed as a calendar that allows you to select a specific month of the  year or week.

    datetime-local always selects the time in the user’s time zone.

CSS, Front-end, Front-end Develop, Uncategorized

Simple tooltip without JavaScript

March 27, 2018

Tooltip is a comment that appears when hovering over an object such as text, images, links, and other interface elements. Content in the tooltip can be text, images or any other information. The purpose of the tooltip is to tell the user what the object is for or to display more information about the object being dragged. We can easily see this application on e-commerce sites. Tooltip often displays additional information about the image, specifications, price of the product you are viewing. The biggest advantage of the tooltip is that it not only displays more information about the object but also saves space on the interface. Let’s learn how to create a tooltip

Create tooltip with extremely simple bootstrap. You simply add the data-toggle = “tooltip” attribute to any element, using the title attribute to define the text that should display the tooltip. Besides, you can also use some other libraries. Today we will guide you to create tooltip without javascript or any library

HTML:

<div class=”container”>

<h1>CSS Directional c-tooltips</h1>

<div class=”demo”>

<p>Data attribute only<a href=”#” data-c-tooltip=”I’m the c-tooltip text”>c-tooltip</a></p>

<p><code>.c-tooltip</code> <a href=”#” class=”c-tooltip” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><code>.c-tooltip-top</code> <a href=”#” class=”c-tooltip-top” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><code>.c-tooltip-right</code> <a href=”#” class=”c-tooltip-right” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><code>.c-tooltip-bottom</code> <a href=”#” class=”c-tooltip-bottom” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>

<p><a href=”#” class=”c-tooltip-left” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a> <code>.c-tooltip-left</code></p>

</div>

</div>

Css:

a:hover {

  text-decoration: none;

}

header,

.demo,

.demo p {

  margin: 4em 0;

  text-align: center;

}

 

/* Base styles for the element that has a c-tooltip */

[data-c-tooltip],

.c-tooltip {

  position: relative;

  cursor: pointer;

}

/* Base styles for the entire c-tooltip */

[data-c-tooltip]:before,

[data-c-tooltip]:after,

.c-tooltip:before,

.c-tooltip:after {

  position: absolute;

  visibility: hidden;

  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

  opacity: 0;

  -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  pointer-events: none;

}

/* Show the entire c-tooltip on hover and focus */

[data-c-tooltip]:hover:before,

[data-c-tooltip]:hover:after,

[data-c-tooltip]:focus:before,

[data-c-tooltip]:focus:after,

.c-tooltip:hover:before,

.c-tooltip:hover:after,

.c-tooltip:focus:before,

.c-tooltip:focus:after {

  visibility: visible;

  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

  opacity: 1;

}

/* Base styles for the c-tooltip’s  arrow */

.c-tooltip:before,

[data-c-tooltip]:before {

  z-index: 1001;

  border: 6px solid transparent;

  background: transparent;

  content: “”;

}

/* Base styles for the c-tooltip’s  */

.c-tooltip:after,

[data-c-tooltip]:after {

  z-index: 1000;

  padding: 8px;

  width: 160px;

  background-color: #000;

  background-color: rgba(51, 51, 51, 0.9);

  color: #fff;

  content: attr(data-c-tooltip);

  font-size: 14px;

  line-height: 1.2;

}

[data-c-tooltip]:before,

[data-c-tooltip]:after,

.c-tooltip:before,

.c-tooltip:after,

.c-tooltip-top:before,

.c-tooltip-top:after {

  bottom: 100%;

  left: 50%;

}

[data-c-tooltip]:before,

.c-tooltip:before,

.c-tooltip-top:before {

  margin-left: -6px;

  margin-bottom: -12px;

  border-top-color: #000;

  border-top-color: rgba(51, 51, 51, 0.9);

}

/* align top/bottom c-tooltips */

[data-c-tooltip]:after,

.c-tooltip:after,

.c-tooltip-top:after {

  margin-left: -80px;

}

[data-c-tooltip]:hover:before,

[data-c-tooltip]:hover:after,

[data-c-tooltip]:focus:before,

[data-c-tooltip]:focus:after,

.c-tooltip:hover:before,

.c-tooltip:hover:after,

.c-tooltip:focus:before,

.c-tooltip:focus:after,

.c-tooltip-top:hover:before,

.c-tooltip-top:hover:after,

.c-tooltip-top:focus:before,

.c-tooltip-top:focus:after {

  -webkit-transform: translateY(-12px);

  -moz-transform: translateY(-12px);

  transform: translateY(-12px);

}

/* Left */

.c-tooltip-left:before,

.c-tooltip-left:after {

  right: 100%;

  bottom: 50%;

  left: auto;

}

.c-tooltip-left:before {

  margin-left: 0;

  margin-right: -12px;

  margin-bottom: 0;

  border-top-color: transparent;

  border-left-color: #000;

  border-left-color: rgba(51, 51, 51, 0.9);

}

.c-tooltip-left:hover:before,

.c-tooltip-left:hover:after,

.c-tooltip-left:focus:before,

.c-tooltip-left:focus:after {

  -webkit-transform: translateX(-12px);

  -moz-transform: translateX(-12px);

  transform: translateX(-12px);

}

/* Bottom */

.c-tooltip-bottom:before,

.c-tooltip-bottom:after {

  top: 100%;

  bottom: auto;

  left: 50%;

}

.c-tooltip-bottom:before {

  margin-top: -12px;

  margin-bottom: 0;

  border-top-color: transparent;

  border-bottom-color: #000;

  border-bottom-color: rgba(51, 51, 51, 0.9);

}

.c-tooltip-bottom:hover:before,

.c-tooltip-bottom:hover:after,

.c-tooltip-bottom:focus:before,

.c-tooltip-bottom:focus:after {

  -webkit-transform: translateY(12px);

  -moz-transform: translateY(12px);

  transform: translateY(12px);

}

/* Right */

.c-tooltip-right:before,

.c-tooltip-right:after {

  bottom: 50%;

  left: 100%;

}

.c-tooltip-right:before {

  margin-bottom: 0;

  margin-left: -12px;

  border-top-color: transparent;

  border-right-color: #000;

  border-right-color: rgba(51, 51, 51, 0.9);

}

.c-tooltip-right:hover:before,

.c-tooltip-right:hover:after,

.c-tooltip-right:focus:before,

.c-tooltip-right:focus:after {

  -webkit-transform: translateX(12px);

  -moz-transform: translateX(12px);

  transform: translateX(12px);

}

/* Move directional arrows down a bit for left/right c-tooltips */

.c-tooltip-left:before,

.c-tooltip-right:before {

  top: 3px;

}

/* Vertically center c-tooltip content for left/right c-tooltips */

.c-tooltip-left:after,

.c-tooltip-right:after {

  margin-left: 0;

  margin-bottom: -16px;

}

Link demo:https://jsfiddle.net/TrinhThang/5p0f3r1n/1/

 

CSS, Front-end, Front-end Develop

Bad code in CSS

March 22, 2018

1. Style undo

Any CSS that unsets styles should begin ringing alerts promptly. The very nature of CSS (Cascading Style Sheet) is that things cascade and inherit from those defined previous. Rulesets should just acquire and add to the past ones, never fix.

The illustration gives us all h3 our usual font-size and margin for dividing, yet additionally a bit of padding and border-bottom in order to visually separate it from the following component. There is nothing “ethically wrong”, it is only that you may have most likely connected them too soon and quickly. Imagine a scenario in which there is a condition that we require the h3 but without that border-bottom and padding-bottom.

Bit of cake, we can accomplish such thing by the take after way:

NO. That has completely turned out badly. What did we truly accomplish at last? A modified version of h3 with no border and padding? More like 10 lines of CSS and one super revolting class name.

What may have been exceptional is the version below:

Eight lines. Not radically shorter but rather containing no style undo and a sensible class name.

As you go down a stylesheet you should just ever be including styles, not taking away. In the event that you discover that the more you go down your document, the more recurrence you need to fix styles, well, the odds are you bounced the weapon and began including excessively too early. Envision CSS like this more than a huge number of lines… that is a great deal of superfluous fix.  Try not to begin excessively unpredictable and chance having, making it impossible to fix your work later on; you’ll end up writing more CSS to accomplish less styling.

 

2. Qualified selectors

Typically when you attempt to qualify something, it is frequently for good reason. In any case, once in a while, you activity may cause calamitous results. Like these:

Fundamentally, selectors which are unnecessarily prepended by a component. These are likewise terrible news since they:

  • Absolutely repress reusability on another component
  • Increment specificity
  • Increment browser workload, clearly diminishing execution.

Why influence a program to search for a class .button on an a when you could simply approach it to search for .button and be finished? By qualifying selectors you are expanding a browser’s workload. By not doing as such, you can:

  • Save actual amounts of code
  • Increment execution
  • Allow greater portability
  • Decrease specificity

Therefore, these bad traits should be corrected like below:

Presently .nav can likewise be connected to an ol, .button can be connected to an input.

Front-end

differences between var, let and const in ES6

October 31, 2017

Before ES6, there was only one way of declaring variables in JavaScript – var . But now, there are a couple of new ways to declare variables in ES6 – let, const.

Let’s do a quick review so you know the differences between var, let, and const.

1. var – function scope

Variable being declared using var will be function scoped, meaning it will exist inside the function it’s declared.

function  test () {

var age = 19;

console.log(age);      //19

}

test();

console.log(age);            // age is not defined

As you can see, age is not reachable from outside the function.

Other types of blocks — like if-statements, loops etc — will not be considered as a scope.

if (true) {

var age = 19;

}

console.log(age)  //19

age is reachable from outside the if-statement.

2. let and const – block scope

const is a signal that the identifier won’t be reassigned.

const age = 19;

age = 20;                            // Assignment to constant variable.

You can not change object or array, but you can change attribute of its.

const adam = {age: 19};

adam = {age: 20};             // Assignment to constant variable.

const adam = {age: 19};

adam.age = 20

console.log(adam)              // {age: 20}

let is a signal that the variable may be reassigned.

In ES6, let and const were introduced as another way to declare variables. Any block will be a scope.

Function still is a scope:

function  test () {

let age = 19;

console.log(age);      //19

}

test();

console.log(age);            // age is not defined

But in this case also other type of blocks qualifies as a scope, like if-statements.

if (true) {

let age = 19;

}

console.log(age)  // age is not defined

3. let in loops

for (var i = 0; i < 5; i++) {

setTimeout(function(){

console.log(i);

}, 1000);

}

Output:

5

5

5

5

5

Because a loop is not a scope when using var.

If you want output is 0 1 2 3 4, you can use let. Because let is block scope:

for (let i = 0; i < 5; i++) {

setTimeout(function(){

console.log(i);

}, 1000);

}

Output:

0

1

2

3

4

Front-end

Using CSS Shapes to create non-rectangular layout

October 31, 2017

For a long time, rectangle is the only shape that a web developer can create using CSS. Most creative non-rectangular layout end in using static image which affects a lot web performance. With the introduction of CSS3 and CSS Shapes, that situation is about to end.

Now you can draw custom paths, like circles, ellipses and polygons using CSS Shapes. Rectangles are too boring to use anymore. These shapes are very common in magazines and newspapers. They are used a lot to arrange content layout, such as wrapping text inside non-rectangular shapes.

CSS Shapes introduction

CSS Shapes enable web designers to create more abstract, geometric layouts, beyond simple rectangles and squares. New CSS properties are required to create these shapes including shape-outside and shape-margin. Currently these properties are only available in Chrome, Opera, and Safari, with the -webkit- prefix, hence -webkit-shape-outside.

Let’s take a look at some examples:
HTML:


<div class="support-css-shapes"></div>

<div class=”wrapper clearfix”>
<div class=”circle”></div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis..</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>

CSS:


.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

body {
font-family: “Helvetica Neue”, Helvetica, arial, freesans, clean, sans-serif;
color: #66595c;
background-color: #faf6ec;
}

/* Start the styles */
p {
line-height: 1.68;
}
h1 {
margin-bottom: 0;
}
h2 {
margin-top: 10px;
font-weight: 400;
line-height: 1.6;
}
.wrapper {
padding: 30px;
max-width: 720px;
margin-right: auto;
margin-left: auto;
}

/* Styles start here */
.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
shape-outside: circle();
-webkit-shape-outside: circle();
margin-right:20px;
}

Demo:

http://jsfiddle.net/TrinhThang/a4xekkaw/

Values:

  • circle(): for making circular shapes.
  • ellipse(): for making elliptical shapes.
  • inset(): for making rectangular shapes.
  • polygon(): for creating any shape with 3 or more vertices.
  • url(): identifies which image should be used to wrap text around.
  • initial: the float area is unaffected.
  • inherit: inherits shape-outside value from parent.

The following values identify which reference of the box model should be used for positioning the shape within:

  • margin-box
  • padding-box
  • border-box

These values should be appended to the end, for instance: shape-outside: circle(50% at 0 0) padding-box. By default the margin-box reference will be used.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up

About CactusThemes

About CactusThemes

We are Power Elite Author on Envato. We specialized in WordPress Themes and Plugins development. Our products focus on User Experience and Business Solution, in many categories such as Video, Sport, Magazine, University, Blog...

Find us on Facebook