Awesome CSS Search Box Using Only HTML & CSS
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Download Files From Here
www.darkcode.i...
DarkCode in Facebook
/ 704904666369941
Paypal Donation Link
paypal.me/YBen...
Music__
Music Name : Different Heaven - Nekozilla (LFZ Remix) [NCS Release]
Music Link : • Different Heaven - Nek...
Artist Social Networks :
LFZ
• / lfzmedia
• / lfzmusic
• / imlfz
Different Heaven
• / different-heaven
• / differentheaven
• / differentheaven
I laughed so hard at the debugging moment at 4:26. He probably thought: "Wtf is wrong here" lol.
true-for-every-developer moment. XD
And it was silly typo. Like usual for us devs
Haha, i always
He was at that moment that he thought, he fuckt up
relatable dilemma
unfortunately he found it so fast, while we spent hours + couple of coffee and aspirin until we found it :((
4:26 That anxiety when you know the error but could not help...
I was going to comment about it and here everybody is talking exactly the same lol
Thanks, I will make a new version of Google with this
Goof luck
:P
I made something kinda like it with php it works with s but not all websites allow s.
Gangsta Steve is there a url for this project?
How can I make the bar from the center go to the left? Not like in the video half right and half left.
Same bro
lol it was easier than i thought thanks mate :D. now i am interested to learn some css code
This is so good. Love the background music. Although i am a beginner at this, i didn't mind the speed as short videos are much more appealing. The best part is that it was such a simple yet cool design.
i cant stop watchin your videos ur amazing
In spanish: excelente vídeo, agradezco que compartas tu talento, me gusta que puedo seguir la escritura del código. Saludos desde Nicaragua!
😂 uno que habla español
in Tagalog dami mong alam ulol
qwertyuiopasdfghjklzxcvbnm
Amazing tutorial! This is a great effect. Thank you very much! :D
If only we can use words to fight wars
4:07 to 4:35 In my head all I can hear is myself screaming SREACH! haha Cool video!
So i just left a comment yesterday about subscribing. I just started a new folder on my computer with your projects. I'll be watching your videos and typing the code along with you so I have a nice library of different things for my sites (:
You guys are really lucky to have this kind of creativity.. basically I don't have creativity at all lol..
Very first time, TH-cam recommended me channel whom I was seeking for.❤️❤️
Very cool tutorial but better to listen your voice understanding why particular things are used, or even comments with English
thank you i will try =)
@@DarkCodeOnline Please reply me, can i use these codes to make a video and upload on my channel? if u allow me to.
@@DarkCodeOnline bro will u please make a video of working search bar as this has a good effect but will not work. Requesting please make a video.
@@TechAllByHarshit this is not his property lol, you can use it.
I couldn't help but chuckle when you missed the "sreach" typo. This is an amazing video. Thank you so much for this!
this is the first I heard about input tag !!!!!!
love this video. make more video like this and really helpful. Love from Bangladesh
Definitely subscribing. Awesome skills.
Thanks for the video. Great stuff. I actually quite rarely come across videos without any voice commentary and I actually like it a lot. You don't need the commentary. In order to implement this trick, you need to have a basic understanding in html and css. then you just repeat the steps, pausing wherever you need.
So, I think that having no voice commentary is a pretty good solution in this case.
The music was too energetic and loud tho, so I just swtiched it off after 10 seconds. Watching this video in complete silence was OK...
So, all those people who say that the creator needs to provide the voice commentary should just try switching off music and watching the video silently.
At the same time, I understand that it's not OK for a youtuber to create a video without any sound, coz this might be pretty suspicious for the internal automated checking mechanisms here, so having some slow and melodic music (not classics) might be the best option.
If I ever come around to making videos like this on some specific tricks, I think I would use melodic and slow music - something from the relaxation music corder of the youtube universe.
Hello! Thank you very much for this lesson. You help me to learn many things.
Wow its looking great bruh... I have implemented this search box in my project :-)
Thanks for introducing very easyeiest method
If you add .search-txt:focus after .search-box:hover > .search-txt in css, the field will also stay, when the mouse goes somewhere else. Its a bit more user friendly. Apart from this nice and actually quite simple effect. Thx for sharing it.
Nice, Elegant and simple loved it .
Thanks this is my next target to do im pretty new to css
awesome! step by step to learn Thanks Man!
Very inspiring and creative! Love the music too! So many other videos bore you to death with silence.
This search bar is awesome! 😆 I love it!
yassine benlachheb jabtak ola la btawfi9 khoya hadchi wa3ar
akhoya masmaytich yassin zid 9aleb chwya hhhhh
@@DarkCodeOnline Hhhh makathamch smiya akhay lmohim rak waldna hh o tbark allah 3lik Proo hadchi kaycharaff pls sifat liya invit 3andi afkar dyal des site momkin nkhadmo bjoj hahowa facebook nta3i facebook.com/MuhammedMeftahi1
Beautiful search box. Congrats!!!
You are amazing...
Good work!
Music is irritating, slow melodious music will be good.
I agree
nice bro, short and clean video
excellent video, in my opinion to center the "search" icon is more advisable to use: text-align: center; line-height: 40px;
I just finished one of the forms tuts and I'm so excited to do this. It's so rewarding compared to 1-2 hour long tutorials where you often fall at the first hurdle and get demotivated - I've been following the same to a tutorial (from another channel obviously) for like a week now and haven't finished so your work is a breath of fresh air
subbed and clicked the bell - I don't do that often ;D
Outstanding bro.... I really love this box as a I'm beginner
wow it work o my god thank you so much .im just now subcribe
I had some problems with the fontawesome, because the page now it's different. But I just copy the link in your video and it works! Thanks. Im gonna present a homework that is in other level hahaha.
After learning web development these are the kinda things that catch my eye..
You helped me a lot bro. One more subscriber. Mais um fã e Brasileiro.
thanks a lot. i solved my big issue by watch ur tutorial
I made a copy of that and figured out how to recolor it to the Minnesota Vikings' colors!
So cool thx for this^^
thank you bro for you support
thx bro loved this it is so awsome
I'm glad you like it
You're great, man, thanks a lot !!!
thx and keep going:)
Awesome. Thanks!!
Would using focus instead of ,or as well as hover, be a good idea so that the text input stays visible while typing even without the cursor being over it to be active?
Thank you DarkCode.
ahh , feel so good , thanks man
4:25 he was at this moment that he thought, I fuckt up...
I experimented with it and worked in a problem with the shape of the lens Biegi under the line and the shape of the monster
Thank U so much!!!!!!!!!!!!!!!!!!
You are a God :)
thanks alot bro, this is beautiful
One of the best coding tutorial channel
awesome code Thanks Bro!
Awesome ty
this is so good :) thank you
Stunning
Tip: Use button instead of anchor. An anchor is not semantically correct here.
Its awesome keep up the good work
tthank you so much,please make more video of different style of createing web page and more, thank you
i wonder how to make the search box doesn't get smaller when we blur the pointer out of it ( when typing the input )?
Great video, but I have 2 problems:
My search logo is kinda underlined, and when I refresh, there's a white flash to the left of my search logo. I know this is because of the transition, but yours doesn't have it and I'm not sure how to fix it. Help would be appreciated :D
Amazing man
thank you
how can we make the thing only extend from the right, and not from both sides?
Amazing bro
Excellent! But can you please make a video on how to add a search mic in the search bar
Super... very excited to watched this video
CSS is stubborn but undeniably exemplary kid in the school
Awesome!
thanks, mate for the tutorial
at that moment "cell" felt the true terror 4:26
music is kinda annoying, but the content is perfect. subscribed
Awesome, osm sir... U r great
Awesome!!
Hey darkcode,
I need your help...
How can i make this box search content?
Thank you!
awesome ,thanks
Thank you
I seem to be having major problems. The search button is not in the center when I hover over it. It's underneath the search box and I don't know how to get in to be centered. Any help would be amazing.
Gracias compa , oajlá puedas subir mas elementos asi
Superb Bhai very helpful
nice channel my friend learning lot of new things can u tell me the program for catching the color codes ?
flatuicolors.com
or: htmlcolorcodes.com/color-picker
Great content, I'm trying to make videos similar to yours, congratulations for the didactics!
Awesome 👍
Bro how can i keep the hover without resizing after clicking on the search text area pls reply!!
Okay thanks but what if the user is typing in the input and put the cursor outside the search box ?
Have you made a video with an other posibility ?
I don't know anything about css, I just like the music
I tried it myself and i love it. there is just one problem. when
i set my search text width at zero my search box does not
shrink accordingly.
gracias, es exactamente lo que buscaba
How can I make the bar from the center go to the left? Not like in the video half right and half left.thanks
Great, well done buddy
Simple ..
Amazing brow :)
Beautiful search bar
thanks for the video, but why when I shift the search box to the left and I put the mouse on it the search btn goes down?
I'm currently having an issue and I'm not sure what is going on.
I have the translate on -100 so it comes out of the button on the left, and I'm trying to put it to the left of the page but after a certain amount when you hover over it the search bar comes out and the icon and such move down to underneath it.
I’m trying to put this search box in a grid side bar but it places it in the center of the page. I tried changing the top and left % to position the box right where I wanted but when I resize the browser the search bar jumps all over the page instead of staying in place where I want it. How do I fix this? I love this responsive design it looks great but I want it stuck to a specific place but it changes places with the browser size. Also for me the circle isn’t perfectly centered in the bar. I’ve compared my code to yours over and over again but it seems to be exact. I’d be nice to get a screen shot of all the code viewable on one page so I don’t have to keep bouncing around in the timeline to compare my code to yours
Amazing !
What will come after search