Cool, I learn lot about after, before ans scale transform. Thanks for great tutorial

Dude!!! Your CSS skills are on whole new level

@CnC_pro

Жыл бұрын

great

thanks, just what I needed.

You are officially my teacher

I'm subscribing straight away

Perfect..

Helped me figure out I need to add transition to the original item rather than apply some :after styling, thanks!

Great!!!!

Looks cool bro.

Attractive Nav ...Any animation or any page make always responsive

Thanks bro you are smart man

Awesome tutorial

Super 👍🏿👏🏿

Jhakashhh

Amazing

Cool

Men you save me thx bro

Fantastic

awesome

Thanks bro

Hello, I have a question because there are elements to which you position without applying the properties of top, left, right, bottom?

thx you

Very nice

Kamal .

Thanks a lot for all your videos.👍👍👍👍👍👍👍👍👍

نايس

CSS CODE: body { margin: 0; padding:0; font-family: sans-serif; background: #151519; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; display: flex; } ul li { list-style: none; } ul li a { position: relative; display: block; padding: 10px 20px; margin: 20px 0; text-decoration: none; text-transform: uppercase; color: #262626; font-weight: bold; transition: .5s; } ul li a:hover { color: #fff; } ul li a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid #000; border-bottom: 1px solid #000; transform: scaleY(2); opacity: 0; transition: .5s; z-index: -1; } ul li a:hover:before { transform: scaleY(1.2); opacity: 1; } ul li a:after { content: ''; position: absolute; top: 1px; left: 0; width: 100%; height: 100%; background: #000; transform: scale(0); transition: .5s; z-index: -1; } ul li a:hover:after { transform: scale(1); } ul li a { color: white; margin-left: 0; } HTML CODE: (I included other stuffs btw) Title Of your Tab Here Text Text Text **NOTE** You can add or lesser the links you want to go or write in.

5 жыл бұрын

I've been looking for the codes. Thank you so much. We don't have to rewrite if the friend who adds the video writes the css codes to the comments

❤️❤️❤️❤️❤️

Plz give some explanation... Anyway awesome video...

Pls is you code is not clear to read can you project ot big size thnx

But, it would be so better if you place those 2 screens side by side, So that we could watch the changes too....please consider this!

oh may gah

do i need some extensions??

Sir plzzz explain us it would be much better

Ctrl+Shift+D copy string in Siblime Text 3 and Alt+Shift+Arrow Up copy string in Visual Studio Code

So can anyone tell me what is z-index? And why that text colored changed after using z-index?

@aaronspurgeon8194

5 жыл бұрын

z-index is the stack order, he put -1 so that the text appears in front of the black background because the text has a higher stack number than the :before and :after

SIR BEFORE OR AFTEER KY SATH SAI KHELA HY GREAT SIR KAMAL HYYYYYYYYYYYYY

Very good thanks for this tutorial But this exemple is not respensive

I like your channel, but I hate this specific music, it's everywhere on youtube

So nice bro how you can remember these properties can help or you written on the paper?

@Moamal-Alaa

2 жыл бұрын

you have to take a course for CSS language so you can study this and become pro before that you must know about HTML language its simple you can study it in a few weeks.

@shahzaib715

2 жыл бұрын

@@Moamal-Alaa Thanks bro I have solid grip on HTML and CSS but I'm talking about how these guy's can remember all properties😎

@Moamal-Alaa

2 жыл бұрын

@@shahzaib715 with a lot of practice 😅

This music... 🙄

this transform property with scale doesnt work.it changes the width of border.. also how both border added in psedo of before..one has to be in pseudo after to work. so nav ul li a:before{ content:''; width:100%; background:#000; position:absolute; top:-50%; left:0; border-top:1px solid #000; opacity:0; transition: .5s; } nav ul li a:hover:before{ transform: translate(0,10px); opacity:1; } nav ul li a:after{ content:''; width:100%; background:#000; position:absolute; top:150%; left:0; border-bottom:1px solid #000; opacity:0; transition: .5s; } nav ul li a:hover:after{ transform: translate(0,-10px); opacity:1; this got me to the first result after lots of hit and trial

@gazagxrlx2974

5 жыл бұрын

What does nav before and after do?

@takibahmed8859

3 жыл бұрын

You don't need to use translate, just use height:100%;

i dont get the spacing u have . weird

Can u please not choose horrible music for your tutorial?

@hypergloom600

6 жыл бұрын

Raffaele Piazzolla You can mute the video, then play your own music ^-^

@-ICS-ROHITRAJSURYAPRASAD

5 жыл бұрын

You should focus on the lesson .

@KD-xp4di

5 жыл бұрын

This music is the best

Very nice