Home
Videos uploaded by user “zFunx Web Developement Ideas”
CSS - ( Part 1 ) Simple Input Text Box
 
02:35
Code used : http://codepen.io/zFunx/pen/GWPQNz Part 2 ( Adding Icon ) : https://youtu.be/rWjntaq4FW4 Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
How To Make Rotating Earth using CSS
 
03:33
Latest code ( for smooth animation , 2nd December 2017 ) : https://codepen.io/zFunx/pen/dZaGJG
CSS - Simple Checkbox Styling
 
08:21
Code used : http://codepen.io/zFunx/pen/dWbevd Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Show Text Over An Image On Hover With Blurred Background
 
06:18
Code used[Last updated on 18th Oct. 2017] : http://codepen.io/zFunx/pen/ZeJEzZ CSS filters don't work with IE. Reference for :not() CSS selector : https://tympanus.net/codrops/css_reference/not/ Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
How to make Responsive Oval / Circle using DIV and CSS
 
04:02
CSS used : .circle{ background-image:url("yourImage.png"); width:50%; border-radius:50%; border:2px solid #000; box-shadow:0 0 10px #000; } .circle:after{ content:""; padding-bottom:100%; display:block; } Image used : http://4.bp.blogspot.com/-0H3_WCM-j18/UfVc4YIheyI/AAAAAAAAArM/5j--KBDa_90/s640/Free+download+Natural+Wallpaper+background+Green+Nature+with+sunrise+wallpaper.png About me : https://www.youtube.com/c/zfunx/about
CSS - ( Part 2 : Adding Icon ) Simple Input Text Box
 
06:07
Code used : https://codepen.io/zFunx/pen/XRyqvx Part 1 : https://youtu.be/omJfspwjnZk Get started with Font Awesome : http://fontawesome.io/get-started/ Learn more about aria-hidden : http://csskarma.com/blog/difference-rolepresentation-aria-hiddentrue/ Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Show Text Over An Image On Hover Without JavaScript ( With And Without Footer Text)
 
09:47
Note : This may not a SEO friendly approach. Learn how to place / show text over an image on hover without JavaScript ( with And without footer text) + On hover zoom effect. About me : https://www.youtube.com/c/zfunx/about Check the latest cross browser code at (updated on 4-sep-2017) : https://codepen.io/zFunx/pen/GveLaQ CSS used in this video ( without footer ) : .textOverImage{ position:relative; width:300px; height:300px; float:left; margin:4px; background-size:100%; background-position:center; transition:0.5s; } .textOverImage:hover{ background-size:110%; } .textOverImage:after{ position:absolute; top:100%; bottom:0; left:0; right:0; white-space:pre-wrap; overflow:hidden; background-color:rgba(0,0,0,0.6); color:#fff; padding:0 8px; opacity:0; content:attr(data-text); transition:0.5s; } .textOverImage:hover:after{ opacity:1; top:0; padding:8px; } .textOverImage:first-line{ color:#fff; font-weight:bold; font-size:1.5em; } ------------------------------------------------------------- CSS used in this video ( with footer ) : .textOverImage{ position:relative; width:300px; height:300px; float:left; margin:4px; background-size:100%; background-position:center; transition:0.5s; } .textOverImage:hover{ background-size:110%; } .textOverImage:after{ position:absolute; top:90%; bottom:0; left:0; right:0; white-space:pre-wrap; overflow:hidden; background-color:rgba(0,0,0,0.3); color:#fff; padding:0 8px; content:attr(data-text); transition:0.5s; } .textOverImage:hover:after{ top:0; padding:8px; background-color:rgba(0,0,0,0.6); } .textOverImage:first-line{ color:#fff; font-weight:bold; font-size:1.5em; } ----------------------------------------------------- Image used : http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg
CSS - Button With On Hover Slide in Fill Animation
 
05:27
Code used : https://codepen.io/zFunx/pen/XRGEor (not working in Chrome) 1st Oct. 2018, I don't know what happened with new Chrome. Above code not working with Buttons in Chrome. It was working before. It is working in other browsers. Either you can use another element like DIV or define an element inside the BUTTON, I rewrote the code here : https://codepen.io/zFunx/pen/rqVqmr Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Button with On Hover Dropdown Menu
 
06:54
Code used : http://codepen.io/zFunx/pen/jBmLWV
CSS - Perfect Gradient Animation For Landing Page
 
05:24
Code used : http://codepen.io/zFunx/pen/oBJWqZ [24th Sep 2017 ] Check the latest code at https://codepen.io/zFunx/pen/oGYWwv . It is more efficient. Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Transparent Text And Opaque Background
 
04:22
Note : Add body,html { height:100%; } I'm showing some of the uses of mix-blend-mode. Code used for black theme : https://codepen.io/zFunx/pen/EbOQow Code used for white theme : https://codepen.io/zFunx/pen/vWQdjv mix-blend-mode does not work with IE and it's under consideration in Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/
CSS - Blurred Background
 
07:49
There's a mistake in the video about 'translate' in '.blurred-bg-container .blur'. The correct calculation is given by : "- [cl - (cw/2)] % , -[ct - (ch/2)] %", not by "(100/cl) x (100-cw) %, (100/ct) x (100-ch) %" This works for both mobile and desktop. This won’t work in IE as CSS filters do not work in IE. Code used [Updated on 16th Oct 2018] : https://codepen.io/zFunx/pen/jYpYmG Read in detail : https://web.zfunx.xyz/blurred-background/ There's a simple way to achieve this effect : https://youtu.be/1yCGUe8w5oA . But that only works on desktop.
CSS - Show Text Over An Image On Click Without JavaScript (Using :target selector)
 
06:21
Code used : http://codepen.io/zFunx/pen/zZpEwd Without javascript, 1) you cannot show text on multiple images at once 2) you cannot hide the text simply by clicking the same image, you have to click another image But I've made the javascript version of this video also : https://youtu.be/onAfy3nZCHc Learn about :target selector from here : https://www.w3schools.com/cssref/sel_target.asp [23 - May - 2017] Problem solved, now you can show text on multiple images at once and hide the text simply by clicking the same image, check the new video : https://youtu.be/GSQisyui5iY
CSS - Flat Toggle Switch
 
05:58
Code used : https://codepen.io/zFunx/pen/yzvVOv
CSS - Expandable Social Icons
 
08:16
Code used : https://codepen.io/zFunx/pen/YEvmvB Do not use many icons as it will push some icons on next line on expanding one of the icons. CDN for Font Awesome Icons : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css Learn more about Font Awesome Icons : https://www.w3schools.com/icons/fontawesome_icons_intro.asp Inner Light by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300021 Artist: http://incompetech.com/
CSS - Show Text Over An Image on Click Using Checkboxes
 
06:56
Code used : https://codepen.io/zFunx/pen/QvzeBN Origin of idea : https://www.w3schools.com/howto/howto_css_switch.asp Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
HTML - How to make Accordion / Expandable List / Collapsible List
 
13:01
Customize your Accordion from http://zfunx.xyz/web/accordion-customizer/ (Sorry Accordion Customizer only works on latest Google Chrome) My Website : http://zfunx.xyz/ Source Code [28th Jan 2018] : http://codepen.io/zFunx/pen/qRrWNv Inspired By : http://www.w3schools.com/howto/howto_js_accordion.asp
CSS -  Show Text Over An Image On Hover With Partial Blurred Background
 
06:57
Code used : https://codepen.io/zFunx/pen/RLMjJL Latest code [23 Nov 2017] ( in which you have to set background only once ) : https://codepen.io/zFunx/pen/pdVBee CSS filters don't work with IE.
CSS for Newspaper Layout
 
03:37
Code used : http://codepen.io/zFunx/pen/BWyOQz Learn more about Multi-column Layout at https://www.w3schools.com/css/css3_multiple_columns.asp Connect at http://instagram.com/zfunx Image used : http://www.ulpnet.com/wp-content/uploads/2016/09/football.jpg
CSS - Wavy Border Using Radial Gradient
 
07:48
Code used : https://codepen.io/zFunx/pen/wPLKGj You can make wavy border with SVG : https://codepen.io/zFunx/pen/oorXRb . I'm setting inline SVG as background there and that's not working with Firefox and IE. How to make hard edged gradient : https://youtu.be/QJLAQvH1Uqw How to align text vertically and horizontally center using CSS flexbox : https://youtu.be/lKMoFNexFs0
CSS & JS - Scroll To Top With Ease-In-Out Effect
 
11:12
Code used : https://codepen.io/zFunx/pen/aLLPwX Note : Have an unknown issue in IE and Edge browser. CDN for Font Awesome Icons : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css Learn more about Font Awesome Icons : https://www.w3schools.com/icons/fontawesome_icons_intro.asp Club Diver - Electronic Hard by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1200020 Artist: http://incompetech.com/
CSS - Shadow Under PNG Image
 
01:15
CSS used : filter : drop-shadow(0 0 5px #000); You can also use this method to give glowing effect to PNG images. Learn about CSS filters : http://www.w3schools.com/cssref/css3_pr_filter.asp Image used : http://www.clipartonline.net/_/rsrc/1472848742129/Tweety-Bird-Clip-Art/Tweety%20bird%20cartoon%20image%201.png?height=320&width=320
CSS & JS - How To Show Toast Notification
 
06:45
Code used : http://codepen.io/zFunx/pen/XMmWVj
CSS - Box-Shadow Ripples / Waves
 
06:29
Code used : https://codepen.io/zFunx/pen/ZawQym Image used : https://pixabay.com/en/avatar-beak-black-cute-emotion-1295429/ Daily Beetle by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1500025 Artist: http://incompetech.com/
CSS - Hard Edged Gradient
 
02:04
Code used : background: linear-gradient( to bottom right, green, green 25%, yellow 25%, yellow 50%, orange 50%, orange 75%, red 75%); Code used(for stripes) : background:repeating-linear-gradient( to top left, red, red 10%, yellow 10%, yellow 20%);
CSS - Cross Browser Custom Range Slider
 
22:37
Code used : https://codepen.io/zFunx/pen/XevMzL
JS - Copy Text To Clipboard
 
02:20
Code used : https://codepen.io/zFunx/pen/RjeRpR You can copy text to clipboard in following steps : 1) Create temporary INPUT or TEXTAREA ( for multi-line text ) element using Javascript 2) Put text ( which you want to copy to clipboard ) in that element 3) Append the element to BODY 4) Select its text using select() 5) Execute copy command using execCommand('copy') 6) Then remove the element from BODY Icon used in the thumbnail made by Elias Bikbulatov ( https://www.flaticon.com/authors/elias-bikbulatov ) from https://www.flaticon.com is licensed by CC 3.0 BY ( http://creativecommons.org/licenses/by/3.0/ ) Tom Perry by Twin Musicom is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://www.twinmusicom.org/song/245/tom-perry Artist: http://www.twinmusicom.org
CSS - Simple Circle Loader
 
03:06
Code used : http://codepen.io/zFunx/pen/oBEYOZ
CSS & JS - Show Text Over An Image On Click
 
09:06
Code used [6th Jan 2018] : http://codepen.io/zFunx/pen/dvJQEY In this video, you will learn how to show text over 1) multiple images at once 2) only one image at a time ...when click on that images. If you wanna see how to show text over an image on hover, go here https://youtu.be/EXWjMswCuf8
CSS - An Animated Line On Border
 
13:09
Not working in Microsoft Edge and IE. Code used : http://codepen.io/zFunx/pen/PmoJWY Two Animated Lines On Border : https://youtu.be/tPUpNaetUAg
CSS - Wave Pattern Using Radial Gradient
 
03:42
Code used : https://codepen.io/zFunx/pen/Omddab
CSS & Little JS - Tabbed Content
 
08:29
Code used : https://codepen.io/zFunx/pen/NgPoEX tab.innerText show some white space at the beginning of the string in IE. It's better to trim that using trim() method. trim() removes white space from both beginning and ending of a string. So replace 'tab.innerText' with 'tab.innerText.trim()'. Learn about :target selector from here : https://www.w3schools.com/cssref/sel_target.asp I have learned about tabs from https://www.w3schools.com/howto/howto_js_tabs.asp, and I modified that idea and presented that in this video.
CSS & JS - Drag and Drop File Uploading [Front End Only]
 
18:34
Code used : https://codepen.io/zFunx/pen/ZXXVmm CDN for Font Awesome Icons : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css Learn more about Font Awesome Icons : https://www.w3schools.com/icons/fontawesome_icons_intro.asp Learn more about XMLHttpRequest : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send(). Learn more about FormData : https://developer.mozilla.org/en-US/docs/Web/API/FormData
SVG & JS - (Part 1 : Set stroke-dasharray & stroke-dashoffset in Percentage) - SVG Path
 
08:22
Set stroke-dasharray & stroke-dashoffset of SVG Path in % using JavaScript. Code used : https://codepen.io/zFunx/pen/yKKmNP Read it on my blog : https://web.zfunx.com/part-1-set-stroke-dasharray-stroke-dashoffset-in-percentage-svg-path/ Learn about how to pass multiple arguments to the function by clicking here : https://www.w3schools.com/js/js_function_parameters.asp and scroll down to The Arguments Object SVGRoad Library : https://github.com/zFunx/SVGRoad.js Website : https://web.zfunx.com/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Two Animated Lines On Border
 
08:49
Code used : https://codepen.io/zFunx/pen/xrgmaQ Single Animated Line On Border : https://youtu.be/0TpJ8XQaCwY
CSS - Soft Glow
 
03:47
This won’t work in IE as CSS filters do not work in IE. Also not working on Edge, I don’t know the reason. Code used : https://codepen.io/zFunx/pen/OQLxvx Read in detail about Soft Glow on my blog : https://web.zfunx.xyz/soft-glow/ Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Flip Card on Hover
 
11:02
How to make simple card with flipping effect when hovers over it. Code used : https://codepen.io/zFunx/pen/RyYZzK If you like to read about it on my blog : https://web.zfunx.com/flip-card-on-hover/ Codepen : https://codepen.io/zFunx/ Website : https://web.zfunx.com/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
CSS - Conical Gradient
 
05:55
Code used : https://codepen.io/zFunx/pen/MrmrLx As CSS filters do not work in IE, this conical gradient won''t work in IE. Read in detail : https://web.zfunx.xyz/conical-gradient
CSS - (Part 1) Vertical Navigation Bar / List
 
09:03
Example is at http://codepen.io/zFunx/pen/wgrOYz Part 2 (Adding Sliding Animation) : https://youtu.be/CXt1yQtxo0w My website : http://zfunx.xyz/ CSS used : body,html{ padding:0; margin:0; height:100%; } .navList{ padding:0; margin:0; list-style-type:none; background-color:#eee; width:150px; height:100%; float:left; overflow:auto; } .navList li a{ text-decoration:none; color:#000; padding:8px; display:block; transition:0.3s; } .navList li a:hover{ color:#fff; background-color:#aaa; } .navList li a[href="#three"]{ color:#fff; background-color:#000; } .content{ height:100%; overflow:auto; }
HTML - Image Aligned With Text
 
02:49
CSS used: .imageWithText{ width:auto; height:1.5em; vertical-align:middle;/*or text-bottom or text-top*/ } Images used: https://www.svgimages.com/svg-image/s4/red-apple-clipart-256x256.png http://images.clipartpanda.com/pineapple-clip-art-McLB9dEca.gif Learn more about CSS Units at http://www.w3schools.com/cssref/css_units.asp My Website : http://zfunx.xyz/
CSS - Infinity Loader Without SVG
 
11:20
Code used : https://codepen.io/zFunx/pen/VXmwbO Read it on my blog : https://web.zfunx.xyz/infinity-loader-without-svg/ Glowing effect doesn't work in Edge and IE. Little mis-alignment in the circles in Firefox. Website : https://web.zfunx.xyz/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/
Javascript - Randomizing an Array
 
05:17
Code used : http://codepen.io/zFunx/pen/xdKpEd Randomizing the array using random swapping (also called Fisher–Yates shuffling ) : 1:59 Randomizing the array using sort() function : 4:02
CSS - Reveal Text On Hover By Sliding Image
 
10:05
Code used : https://codepen.io/zFunx/pen/JMdKLm
CSS - Progress Bar With Animated Stripes
 
07:37
Code used : http://codepen.io/zFunx/pen/GWbzWj Add 'transition:.3s' to 'stripesLoader' class so that if you change progress value, it will change smoothly. I set up a demo of changing progress value at http://codepen.io/zFunx/pen/GWbzWj
JavaScript - Getting Mouse Speed and Acceleration
 
11:12
In this video, I'll show you, using JavaScript, how to get speed of mouse movement, max. speed, acceleration, max. positive acceleration and its max. negative acceleration. Code used : https://codepen.io/zFunx/pen/WjVzWo Learn about setInterval() : https://www.w3schools.com/jsref/met_win_setinterval.asp
CSS - Image with Rounded Corner and Footer Text
 
05:32
css: .card{ border:2px solid white; display:inline-block; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:5px; background-color:white; margin:8px} .card img{border-radius:5px;} My site: http://zfunx.xyz/ Connect at : instagram.com/zfunx To learn about css border, go to http://www.w3schools.com/css/css_border.asp To learn about inline-block display property, go to http://www.w3schools.com/css/css_inline-block.asp To learn about text alignment, go to http://www.w3schools.com/css/css_text.asp To learn about css shadow, go to http://www.w3schools.com/css/css3_shadows.asp To learn about rounded corners ( css border radius ), go to http://www.w3schools.com/css/css3_borders.asp
JS - Smooth Linear Scrolling to Page Anchors
 
12:37
Code used : http://codepen.io/zFunx/pen/GmMGax [Updated on 2 Oct 2017] Add the following code for Firefox : _:-moz-tree-row(hover), html { scroll-behavior: smooth;/*for firefox*/ }
CSS & JS - Dialog / Modal Box
 
10:42
Code used : http://codepen.io/zFunx/pen/zwOdmE
CSS - On Hover Bounced Zoom Effect
 
02:18
Code used : http://codepen.io/zFunx/pen/GrwrdK cubic-bezier generator : http://cubic-bezier.com My website : http://zfunx.xyz/ Connect at https://www.instagram.com/zfunx/
CSS - Button With Overflowing Icon
 
06:49
Code used : https://codepen.io/zFunx/pen/EEBemo Read it in on my blog : https://web.zfunx.com/button-with-overflowing-icon/ We are using Font Awesome 4.7 (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css), css variable and text stroke for this tutorial. Version 5.0.0 of Font Awesome and above not so compatible with this tutorial. But you can apply the idea used here with some little changes to make those higher versions compatible. IE doesn’t support CSS variables, -webkit-text-stroke-color and -webkit-text-stroke-width. We have to add code specially for IE : @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .overflow-icon-btn { background-color: dodgerblue; text-shadow: 0 0 8px dodgerblue; box-shadow: 0 0 4px dodgerblue; } .overflow-icon-btn:hover { text-shadow: 0 0 24px dodgerblue; box-shadow: 0 0 12px dodgerblue; } } Website : https://web.zfunx.com/ Facebook : https://www.facebook.com/zfunxWeb Google+ : https://plus.google.com/113560671967552430928 Twitter : http://twitter.com/PleeZfunx Instagram : https://www.instagram.com/zfunx/

Pipefitter cover letter
Cover letter examples simple tenses
Uk passport cover letter
Customer service sample cover letter
Polizeiwissenschaft newsletter formats