The post How to create creative CSS pop up effect & image hover effect clip path property using HTML & CSS? appeared first on scmGalaxy.

The post Different ways to write creative menu effects using the transition-delay property using HTML & CSS. appeared first on scmGalaxy.

Whenever we define the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

We can set this property to none (default) and length

Ex: –

div { perspective: 50px ; }

Perspective-origin–

This property is used to define where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements. This will only effect on 3D transformed elements. We can set this property to x (default 50%) and y axis (default 50%).

Whenever we define the perspective-origin property for an element, it is the child elements that are positioned, not the element itself.

 Ex: –

div { perspective-origin: 20%   20%  ; }

backface-visibility–

This property is used to define whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside. We can set this property to visible (default) and hidden.

Ex: –

div { backface-visibility: hidden; }

The post How to use perspective property in CSS? appeared first on scmGalaxy.

Cookies are exposed as the cookie property of the Document object. This property is both readable and writeable.

You can see Cookies in Google Chrome by following chrome://settings/content/cookies

Creating Cookies

When you assign a string to document.cookie, the browser parses it as a cookie and adds it to its list of cookies. There are several parts to each cookies, many of them optional.

Syntax: –

document.cookie = “name=value”;
document.cookie = “name=value; expires=date; domain=domain; path=path; secure”;
document.cookie = “name=value; max-age=inSecond; domain=domain; path=path; secure”;

Ex:-

Creating Cookies

Optional Cookies Attribute:-

max-age
expires
domain
path
secure

Whenever you omit the optional cookie fields, the browser fills them in automatically with reasonable defaults.

max-age

It is used to create persistent cookies. It is supported by all modern browsers except IE.

Type of cookies: –

• Session Cookies – Cookies that are set without the expires/max-age field are called session cookies. It is destroyed when the user quits the browser.
• Persistent Cookies – The browser keeps it up until their expiration date is reached.

Ex:-

expires

It is used to create persistent cookies.

Type of cookies: –

• Session Cookies – Cookies that are set without the expires/max-age field are called session cookies. It is destroyed when the user quits the browser.
• Persistent Cookies – The browser keeps it up until their expiration date is reached.

Ex:-

document.cookie = “username=devops; expires=Monday, 3-Sep-2018 09:00:00 UTC”;

domain

It specifies the domain for which the cookie is valid. If not specified, this defaults to the host portion of the current document location. If a domain is specified, subdomains are always included.

Ex: –

path

Path can be / (root) or /mydir (directory). If not specified, defaults to the current path of the current document location, as well as its descendants.

Ex: – document.cookie = “username=devops; path=/”;

Ex: – document.cookie = “username=devops; path=/home”;

secure

Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.

Ex: – document.cookie = “username=devops; secure”;

The post How many create cookies in JavaScript? appeared first on scmGalaxy.

2D transformations can change the x and y axis of an element.

3D transformations can change the x, y and z axis of an element.

Syntax: –

Selector { transform-origin: x-axis y-axis z-axis; }

Ex: –

div { transform-origin: 10%   20%    30%  ; }

x-axis–

This is used to define where the view is placed at the x-axis.

• left
• center
• right
• length (px, cm, em, %)

y-axis-

This is used to define where the view is placed at the y-axis.

• top
• center
• bottom
• length (px, cm, em, %)

z-axis-

This is used to define where the view is placed at the z-axis.

• length (px, cm, em, %)

transform-style-

This property is used to specify how nested elements are rendered in 3D space. This property must be used together with the transform property. We can set this property to flat (default) and preserve-3d.

Ex: –

div { transform-style: preserve-3d ; }

Note – child elements will preserve its 3D position

The post How to use transform-origin property in CSS? appeared first on scmGalaxy.

The History object is a read-only array of URL strings that shows where the user has been recently.

Syntax: –

window.history.property

window.history.method

Property

• length – It returns the number of URLs in the history list.

Methods

• back ( ) – It loads the previous URL in the history list.

• forward ( ) – It loads the next URL in the history list.

• go ( ) – It access a particular item in the history list relative to the current position. Using a negative value moves to a history item previous to the current location, while a positive number moves forward in the history list.

Location Object

This is used to access the current location (URL) of the window. The Location object can be both read and replaced, so it is possible to update the location of a page through scripting. Location object is a property of Window.

Syntax:-

window.location.property

window.location.method

Properties

• hash – The part of the URL including and following the # symbol.
• host – The hostname and port number.
• hostname – hostname
• href – entire URL
• pathname – Path relative to the host.
• port – Port Number
• protocol – Protocol of URL
• search – The part of the URL including and after the ?

Methods

• assign(URL) – It changes the location of current page with the passed in URL.
• reload( ) – Reload the current page.
• replace (URL) – Replaces the current page with the given URL in history. As it is replaced in history, it won’t be possible to access the current page with back/forward.

The post History Object and Location Object in javascript? appeared first on scmGalaxy.

• translate()
• rotate()
• scale()
• skew()
• matrix()

Ex:-

div { transform: rotate(20deg); }

translate( )–

This method is used to move an element from its current position.

Syntax: –

transform: translateX(px)

transform: translateY(px)

transform: translate(Xpx, Ypx)

Ex: –

transform: translateX(10px)

transform: translateY(5px)

transform: translate(10px, 5px)

rotate( )–

This method is used to rotate an element clockwise or anti-clockwise according to a given degree.

Using negative values will rotate the element anti-clockwise.

Syntax: –

transform: rotate(ndeg)

Ex: –

transform: rotate(50deg)

transform: rotate(-40deg)

scale( )–

This method is used to increases or decreases the size of an element

Syntax: –

transform: scaleX(width)
transform: scaleY(height)
transform: scale(width, height)

Ex: –

transform: scaleX(3)
transform: scaleY(4)
transform: scale(3, 4)

skew()–

This method is used to skews an element along the X and Y-axis by the given angles.

Syntax: –

transform: skewX(deg)
transform: skewY(deg)
transform: skew(Xdeg, Ydeg)

Ex: –

transform: skewX(30deg)
transform: skewY(40deg)
transform: skew(30deg, 40deg)
transform: skew(30deg)

matrix()–

This method is used to combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Syntax: –

transform:

Ex: –

transform:

none–

No transform

Ex: –

transform: none;

The post How to use 2d transform property in CSS? appeared first on scmGalaxy.

display properties use below –

• inline
• block
• flex
• inline-block
• inline-flex
• inline-table
• list-item
• run-in
• table

• table-row-group
• table-caption
• table-column-group
• table-header-group
• table-footer-group
• table-cell
• table-column
• table-row none

Display–

• inline – When we set this value, the element does not start on a new line and only takes up as much width as necessary (we can’t set width/height it won’t work)
• block – When we set this value, element always starts on a new line and takes up the full width available (we can set width/height)
• inline-block – It is combination of inline and block value. It doesn’t start on new line but we can set width and height.
• none – The element will not be displayed at all (has no effect on layout)
• flex – Displays an element as a block-level flex container.
• inline-flex – Displays an element as an inline-level flex container.
• inline-table – The element is displayed as an inline-level table
• run-in – Displays an element as either block or inline, depending on context

• table – It works like a element
• table-caption – It works like a element
• table-header-group – It works like a element
• table-footer-group – It works like a element
• table-row-group – It works like a element
• table-cell – It works like a element
• table-row – It works like a element
• list-item – It works like a element

justify-content–

This property is used to align the flexible container’s items when the items do not use all available space on the main-axis (horizontally). We can set this property to flex-start (default), flex-end, center, space-between, space-around.

Ex: –

div { justify-content: center; }

• flex-start – This is used to position the item at the beginning of the container
• flex-end – This is used to position the item at the end of the container
• center – This is used to position the item at the center of the container
• space-between – This is used to position the item with space between the lines
• space-around – This is used to position the item with space before, between, and after the lines

align-items–

This property is used to specify the default alignment for items inside the container. This property can be override using align-self property for each item. We can set this property to stretch (default), center, flex-start, flex-end, baseline.

Ex: –

div { align-items: center; }

• stretch – This is used to stretch the item to fit the container
• center – This is used to position the item at the center of the container
• flex-start – This is used to position the item at the beginning of the container
• flex-end – This is used to position the item at the end of the container
• baseline – This is used to position the item at the baseline of the container

align-content–

This property is used to modify the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. There must be multiple lines of items for this property to have any effect. We can set this property to stretch (default), center, flex-start, flex-end, space-between, space-around.

Ex: –

• div { align-content: center; }
• stretch – Lines stretch to take up the remaining space
• center – Lines are packed toward the center of the flex container
• flex-start – Lines are packed toward the start of the flex container
• flex-end – Lines are packed toward the end of the flex container
• space-between – Lines are evenly distributed in the flex container
• space-around – Lines are evenly distributed in the flex container, with half-size spaces on either end

order–

This property is used to specify the order of a flexible item relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the order property has no effect. We can set this property to number (default 0).

Ex: –

div {order: 1}

align-self–

This property is used to specify the alignment for the selected item inside the flexible container. The align-self property overrides the flexible container’s align-items property. We can set this property to auto (default), stretch, center, flex-start, flex-end, baseline.

Ex: –

• div {align-self: center;}
• auto – The element inherits its parent container’s align-items property, or “stretch” if it has no parent container
• stretch – This is used to position the element to fit the container
• center – This is used to position the element at the center of the container 
• flex-start – This is used to position the element at the beginning of the container
• flex-end – This is used to position the element at the end of the container
• baseline – This is used to position the element at the baseline of the container

The post How to use display property in CSS? appeared first on scmGalaxy.

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Syntax: –

Selector { flex: flex-grow flex-shrink flex-basis}

Ex: –

div { flex: 2 3;}

FlexBox or Flexible Box–

What is it ?

–Its Layout mode a CSS 3 concept

Why we need it ?

–It helps to create responsive web pages

Flexbox Properties–

• flex-direction
• flex-wrap
• align-content
• flex-flow
• flow-grow
• flow-shrink
• flow-basis
• flex

flex-direction–

This property is used to set the direction of flexible items. If the element is not a flexible item, the flex-direction property has no effect. We can set this property to row (default), row-reverse, column, column-reverse.

Ex: –

div { flex-direction: column-reverse; }

• row – This is used to display the flexible items horizontally as row
• row-reverse – This is used to display the flexible items same as row, but in reverse order
• column – This is used to display the flexible items vertically as column
• column-reverse – This is used to display the flexible items same as column, but in reverse order

flex-wrap–

This property is used to specify whether the flexible items should wrap or not. If the elements are not flexible items, the flex-wrap property has no effect. We can set this property to nowrap (default), wrap and wrap-reverse.

Ex: –

div { flex-wrap: wrap; }

• nowrap – It specifies that the flexible items will not wrap
• wrap – It specifies that the flexible items will wrap if necessary
• wrap-reverse – It specifies that the flexible items will wrap, if necessary, in reverse order

flex-flow–

It is a shorthand property for the flex-direction and the flex-wrap properties. If the elements are not flexible items, the flex-flow property has no effect.

Syntax: –

Selector { flex-flow: flex-direction flex-wrap;}

Ex: –

div { flex-flow: row-reverse wrap;}

• Flex-direction values:
• row (default)
• row-reverse
• Column
• column-reverse.

• Flex-wrap values:
• nowrap (default)
• wrap
• wrap-reverse

flex-grow–

This property is used to specify how much the item will grow relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-grow property has no effect. We can set this property to number (default 0).

Ex: –

div {flex-grow: 1;}

flex-shrink–

This property is used to specify how the item will shrink relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-shrink property has no effect. We can set this property to number (default 1).

Ex: –

div {flex-shrink: 2;}

flex-basis

This property is used to specify the initial length of a flexible item. If the element is not a flexible item, the flex-basis property has no effect. We can set this property to number and auto (default).

Ex:–

div {flex-basis: 3;}

• number – A length unit, or percentage, specifying the initial length of the flexible item(s)
• auto – The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content

The post How to use Flex property in CSS? appeared first on scmGalaxy.

The box-sizing property is used to include the padding and border in an element’s total width and height.

Ex:-

div { box-sizing: border-box;}

content-box-

The width and height properties (and min/max properties) include only the content. Border, padding, or margin are not included.

border-box-

The width and height properties (and min/max properties) include content, padding, and border, but not the margin.

box-size property usually uses in cards, images & fonts.

The post How to use box-sizing property in CSS? appeared first on scmGalaxy.

• column-rule
• column-rule-style
• column-rule-width
• column-rule-color

This is shorthand of other column-rule-* properties.

Syntax: –

Selector {column-rule: column-rule-width column-rule-style column-rule-color }

Ex: –

div { column-rule: 5px solid red;}

column-rule-style–

This property is used to specify the style of the rule between columns. We can set this property to none (default), hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.

Ex: –

div { column-rule-style: double;}

column-rule-width–

This property is used to specify width of the rule between columns. We can set this property to medium (default), thin, thick and length.

Ex: –

div { column-rule-width: 5px;}

column-rule-color

This property is used to specify color of the rule between columns. We can set this property to color value.

Ex: –

div { column-rule-color: red;}

The post Which properties are shorthand for the column-rule property? appeared first on scmGalaxy.

• column-count
• column-width
• columns

column-count–

This property is used to specify the number of columns an element should be divided into. We can set this property to number or auto (default).

Ex:-

div { column-count: 2;}

column-width–

This property is used to specify width for the columns. We can set this property to length or auto (default).

Ex:-

columns–

This is shorthand which is used to set column-width and column-count.

Syntax: –

Selector { columns: column-width column-count;}

Ex:-

div { columns: 200px 2;}

The post How to use Columns Property in CSS? appeared first on scmGalaxy.

Width–

This property is used to set the width of an element. We can set this property to auto and length in the form of px, cm, % etc.

Ex:-

div { width: 100px; }

Height–

This property is used to set the height of an element. We can set this property to auto and length in the form of px, cm, % etc.

Ex: –

div { height: 100px; }

The post How to use Width & Height Property in CSS? appeared first on scmGalaxy.

• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration

text-decoration-line

This property is used to specify what type of line the decoration will have. We can set this property to none, underline, overline, line-through

We can combine more than one value, like underline and overline to display lines both under and over the text.

Ex:-

h1 { text-decoration-line: underline;}
h1 { text-decoration-line: underline overline;}

text-decoration-style–

This property is used to specify how the line will display.

We can set this property to solid, double, dotted, dashed, wavy.

Ex:-

text-decoration-color–

This property is used to specify the color of the text-decoration-line.

Ex:-

text-decoration–

This is shorthand of all three text-decoration properties.

Syntax: –

Selector {text-decoration: text-decoration-line text-decoration-style text-decoration-color}

Ex:-

h1 {  text-decoration: underline dotted red ; }

The post How to use text-decoration property in CSS? appeared first on scmGalaxy.

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.
Setting the value of innerHTML lets you easily replace the existing contents of an element with new content.
HTML5 specifies that a <script> tag inserted with innerHTML should not execute.
It is recommended you should not use innerHTML when inserting plain text; instead, use textContent.

outerHTML

The outerHTML is the HTML of an element including the element itself. Use the outerHTML when you want to completely replace an element and its contents. Use innerHTML when you only want to replace the contents of the element.

What is the difference between innerText and outerText?

The innerText property works similarly to the innerHTML property, except that it is focused solely on the textual content contained within an element. The innerText property sets or returns the text content of the specified node, and all its descendants. If you set the innerText property, any child nodes are removed and replaced by a single Text node containing the specified string. This feature was originally introduced by Internet Explorer and was formally specified in the HTML standard in 2016 after being adopted by all major browser vendors. To set or return the HTML content of an element, use the innerHTML property.

outerText

outerText property works similarly to the outerHTML property, modifies the element itself, and replaces it with a single text node. This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.

The post Difference between innerHTML and outerHTML in JavaScript appeared first on scmGalaxy.

If referenceNode is null, the newNode is inserted at the end of the list of child nodes.

Syntax: –

parentNode.insertBefore(newNode, referenceNode);

insertAdjacentElement ( ) Method

The insertAdjacentElement() method inserts the specified element into a given specified position. It returns the element that was inserted, or null if the insertion failed.

Syntax:-

element – The element to be inserted into the tree.
The beforebegin and afterend positions work only if the node is in a tree and has an element parent.

insertAdjacentHTML ( ) Method

The insertAdjacentHTML() method is used to insert a text as HTML (parses the specified text as HTML or XML) into a specified position.

Syntax:-

text – The string to be parsed as HTML or XML and inserted into the tree.
It is recommended you not use insertAdjacentHTML when inserting plain text instead, use the node.textContent property

insertAdjacentText ( ) Method

The insertAdjacentText() method inserts the specified element into a specified position.

Syntax:-

text – The text which is about to insert.
The beforebegin and afterend positions work only if the node is in a tree and has an element parent.

The post Insert( ) Method in JavaScript appeared first on scmGalaxy.

Ex:-

img { filter: blur(10px);}

Syntax-

• none – Default value. Specifies no effects
• blur(px) – This is used to apply blur effect to the image. A larger value will create more blur.
• brightness(%) – This is used to adjust the brightness of the image. 0% will make the image completely black. 100% is default and represents the original image. Values over 100% will provide brighter results.
• contrast(%) – This is used to adjust the contrast of the image. 0% will make the image completely black. 100% is default and represents the original image. Values over 100% will provide results with less contrast.

• grayscale(%) – This is used to convert the image to grayscale. 0% is default and represents the original image. 100% will make the image completely gray. Negative values are not allowed.
• hue-rotate(deg) – This is used to specify a hue rotation on the image. 0deg is default, and represents the original image. Maximum value is 360deg.
• invert(%) – This is used to invert the samples in the image. 0% is default and represents the original image. 100% will make the image completely inverted. Negative values are not allowed.

• opacity(%) – This is used to set the opacity level for the image. This is similar to the opacity property. 0% is completely transparent. 100% is default and represents the original image. Negative values are not allowed.
• saturate(%) – This is used to saturate the image. 0% will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides higher-saturated results. Negative values are not allowed.
• sepia(%) – This is used to convert the image to sepia. 0% is default and represents the original image. 100% will make the image completely sepia. Negative values are not allowed.
• url() – The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. filter: url(svg-url#element-id)

The post How to use Filter Property in CSS? appeared first on scmGalaxy.

Cursor–

• default – The default cursor
• auto – Default. The browser sets a cursor
• all-scroll – The cursor indicates that something can be scrolled in any direction
• none – No cursor is rendered for the element
• not-allowed – The cursor indicates that the requested action will not be executed
• text – The cursor indicates text that may be selected
• URL – A comma separated list of URLs to custom cursors. Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
• row-resize – The cursor indicates that the row can be resized vertically
• s-resize – The cursor indicates that an edge of a box is to be moved down (south)
• se-resize – The cursor indicates that an edge of a box is to be moved down and right (south/east)
• sw-resize – The cursor indicates that an edge of a box is to be moved down and left (south/west)

• n-resize – The cursor indicates that an edge of a box is to be moved up (north)
• ne-resize – The cursor indicates that an edge of a box is to be moved up and right (north/east)
• nesw-resize – Indicates a bidirectional resize cursor
• ns-resize – Indicates a bidirectional resize cursor
• nw-resize – The cursor indicates that an edge of a box is to be moved up and left (north/west)
• nwse-resize – Indicates a bidirectional resize cursor
• copy – The cursor indicates something is to be copied
• alias – The cursor indicates an alias of something is to be created
• e-resize – The cursor indicates that an edge of a box is to be moved right (east)
• ew-resize – Indicates a bidirectional resize cursor
• pointer – The cursor is a pointer and indicates a link
• progress – The cursor indicates that the program is busy (in progress)
• zoom-out – The cursor indicates that something can be zoomed out
• zoom-in – The cursor indicates that something can be zoomed in

• vertical-text – The cursor indicates vertical-text that may be selected
• w-resize – The cursor indicates that an edge of a box is to be moved left (west)
• wait – The cursor indicates that the program is busy
• context-menu – The cursor indicates that a context-menu is available
• col-resize – The cursor indicates that the column can be resized horizontally
• cell – The cursor indicates that a cell (or set of cells) may be selected
• no-drop – The cursor indicates that the dragged item cannot be dropped here
• crosshair – The cursor render as a crosshair
• grab – The cursor indicates that something can be grabbed
• grabbing – The cursor indicates that something can be grabbed
• help – The cursor indicates that help is available
• move – The cursor indicates something is to be moved

The post How to use Cursor Property in CSS? appeared first on scmGalaxy.

Syntax: – 

box-shadow: h-shadow v-shadow blur spread color inset

• h-shadow – The position of the horizontal shadow. Negative values are allowed.
• v-shadow – The position of the vertical shadow. Negative values are allowed.
• blur – The blur distance.
• Spread – Size of shadow. Negative values are allowed
• color – The color of the shadow
• none – No shadow. Default
• inset – Changes the shadow from an outer shadow (outset) to an inner shadow
• div {box-shadow: 2px 2px 5px red;}
• div {box-shadow: 2px 2px 5px red, 5px 5px 8px blue;}

The post How to use box-shadow property in CSS? appeared first on scmGalaxy.

• border-image
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Border Image–

Syntax: –

Selector {border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat; }

Ex:-

#borderis {border-image: url(border.png) 10 round;}

border-image-source-

This property is used to specify source of image which is used as border. We can set this property to none or image.

Ex:-

#borderis { border-image-source: none; }

#borderis { border-image-source: url(border.png); }

If the value is “none” or if the specified image can not be found, the border styles will be used.

border-image-slice-

This property is used to specify how to slice the image specified by border-image-source property. The image is always sliced into nine sections: four corners, four edges and the middle. The “middle” part is treated as fully transparent, unless the fill keyword is set. We can set this property to number, % and fill.

Ex:-

#borderis { border-image-slice: 10; }

#borderis { border-image-slice: fill); }

border-image-width-

This property is used to specify width of the border image. We can set this property to number, length and auto.

Ex:-

#borderis { border-image-width: 10; }

#borderis { border-image-width: 10px; }

#borderis { border-image-width: 10%; }

#borderis { border-image-width: auto; }

border-image-outset-

This property is used to specify the amount by which the border image area extends beyond the border box. We can set this property to number and length.

Ex:-

#borderis { border-image-outset: 10; }

#borderis { border-image-outset: 10px; }

The post How to use Border Image Property in CSS? appeared first on scmGalaxy.