DEV Community: ali-dev-hash

CSS Card Hover Effects | Html CSS

ali-dev-hash — Thu, 06 May 2021 18:54:17 +0000

CSS Card Hover Effects | Html CSS
Demo == > https://codepen.io/Bilal1909/pen/zYZOKQw?editors=1100

CSS Counter-Increment & Counter-Reset

ali-dev-hash — Tue, 04 May 2021 10:37:15 +0000

CSS Counter-Increment & Counter-Reset

Demo --> https://codepen.io/Bilal1909/pen/KKaORBp

Animated Glass Morphism Product Card HTML CSS | Glassmorphism HTML CSS

ali-dev-hash — Mon, 03 May 2021 12:19:29 +0000

Animated Glass Morphism Product Card HTML CSS | Glassmorphism HTML CSS

Demo == > https://codepen.io/Bilal1909/pen/wvgLOXx

Change Background color on Click | Javascript Beginner Project

ali-dev-hash — Sun, 02 May 2021 10:58:26 +0000

Change Background color on Click | Javascript Beginner Project

Demo == > https://codepen.io/Bilal1909/full/vYgqayx

Cool Glowing Effect on Buttons using HTML & CSS

ali-dev-hash — Sat, 01 May 2021 12:22:40 +0000

Cool Glowing Effect on Buttons using HTML & CSS

Demo ==> https://codepen.io/Bilal1909/full/yLgdbPK

Keywords :
Cool Glowing Effect on Buttons using HTML & CSS |
glowing button html css, html css glowing button, glowing effect html css, html css glowing effect, css glowing effect on button, glowing button using html css, glowing effect on button in html css

Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: https://youtu.be/xgcLwtGlgLU

Track: Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: https://youtu.be/L7kF4MXXCoA

JavaScript Key Code

ali-dev-hash — Wed, 28 Apr 2021 20:43:42 +0000

JavaScript Key Code

Demo == > https://codepen.io/Bilal1909/full/jOyJWpz

KeyboardEvent keyCode Property

Definition and Usage

The keyCode property returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event.

The difference between the two code types:

Character codes - A number which represents an ASCII character
Key codes - A number which represents an actual key on the keyboard
These types do not always mean the same thing; for example, a lower case "w" and an upper case "W" have the same keyboard code, because the key that is pressed on the keyboard is the same (just "W" = the number "87"), but a different character code because the resulting character is different (either "w" or "W", which is "119" or "87") - See "More Examples" below to better understand it.

Tip: To find out if the user is pressing a printable key (e.g. "a" or "5"), it is recommended to use this property on the onkeypress event. To find out if the user is pressing a function key (e.g. "F1", "CAPS LOCK" or "Home") use the onkeydown or onkeyup event.

Note: In Firefox, the keyCode property does not work on the onkeypress event (will only return 0). For a cross-browser
solution, use the which property together with keyCode, e.g:

Tip: For a list of all Unicode characters, please study our Complete Unicode Reference.

Tip: If you want to convert the returned Unicode value into a character, use the fromCharCode() method.

Note: This property is read-only.

Note: Both the keyCode and which property is provided for compatibility only. The latest version of the DOM Events Specification recommend using the key property instead (if available).

Tip: If you want to find out whether the "ALT", "CTRL", "META" or "SHIFT" key was pressed when a key event occured, use the altKey, ctrlKey, metaKey or shiftKey property.

Enter Full-Screen Mode with JavaScript - Fullscreen

ali-dev-hash — Tue, 27 Apr 2021 10:49:42 +0000

Enter Full-Screen Mode with JavaScript - Fullscreen

demo == > https://codepen.io/Bilal1909/full/XWpOQEO

How to use JavaScript to view an element in fullscreen mode

To open an element in fullscreen, we use the element.requestFullscreen() method:

Fullscreen Document

To open the whole page in fullscreen, use the document.documentElement instead of document.getElementById("element"). In this example, we also use a close function to close the fullscreen:

Parallax Scrolling Effect Using JavaScript | HTML & CSS

ali-dev-hash — Mon, 26 Apr 2021 09:37:52 +0000

Parallax Scrolling Effect Using JavaScript | HTML & CSS

Demo == > https://codepen.io/Bilal1909/pen/zYNebga

Parallax Scrolling CSS - Parallax Effect In HTML & CSS In Just 5 Minutes

What is Parallax Effect ?

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.

Note: Parallax scrolling does not always work on mobile devices/smart phones. However, you can use media queries to turn off the effect on mobile devices (see last example on this page).

Flexbox Equal height columns and leftover elements!

ali-dev-hash — Sun, 25 Apr 2021 18:57:57 +0000

Flexbox Equal height columns and leftover elements!

Demo == > https://codepen.io/Bilal1909/pen/bGgzerV?editors=1000

Shedd Aquarium Museum Schedule Page Using Bootstrap

ali-dev-hash — Thu, 22 Apr 2021 09:50:25 +0000

Shedd Aquarium Museum Schedule Page Using Bootstrap
Demo == > https://codepen.io/Bilal1909/pen/ZELmXmy

Print the Page using JavaScript with attractive UI design

ali-dev-hash — Tue, 20 Apr 2021 18:02:50 +0000

Print the Page using JavaScript with attractive UI design | Print Particular Page Div only
Demo = > https://codepen.io/Bilal1909/pen/qBbaWYy

Build a Responsive Grid CSS Website Layout From Scratch

ali-dev-hash — Mon, 19 Apr 2021 09:41:45 +0000

Build a Responsive Grid CSS Website Layout From Scratch

Demo == > https://codepen.io/Bilal1909/pen/BapJXgx?editors=0100