Text Typography Portrait using Html & CSS | CSS Effects

Подписаться 935 тыс.

Просмотров 118 тыс.

50% 1

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/course/complete...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Also Watch This
Pure CSS Text Portrait and Mousemove Parallax Effects using vanilla Javascript
• Pure CSS Text Portrait...
Pure CSS Text Portrait Effects | Html CSS Tutorial
• Pure CSS Text Portrait...
------------------
Image Download Link
Text : drive.google.com/file/d/1KxSm...
Face : drive.google.com/file/d/1_-Ci...
------------------
Patreon : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutorialsweb.com
Music Credit
Track: Warriyo - Mortals (feat. Laura Brehm) [NCS Release]
Music provided by NoCopyrightSounds.
• Warriyo - Mortals (fea...
Disclaimer
video is for educational purpose only.Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

Опубликовано:

31 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 151

@SalmanKhan-ri1gt 3 года назад

I was not expecting this u do this with codes U right sir be creative ❤️

@OnlineTutorialsYT 3 года назад

🙂

@VitoxCzechia 3 года назад

I am proud of world, because here are people like you, whose created new great things. Thanks!

@jozimarhenriques6848 3 года назад

Muito obrigado por estes tutoriais, aprendendo muito mais a cada dia! Thank you so much for these tutorials, learning a lot more each day!

@guerrerojorge4222 3 года назад

Desde que conocí este canal, estoy encantado con todos tus tutoriales. Gracias :b

@mdsumonmia3997 3 года назад

When I saw your video I just think Why someone will hire me if there are available expert like you. I just trying to develop my skill just thik about this. Really You are the greatest.

@HimanshuSingh-rc8zy 3 года назад

Lol same

@ziacodess 3 года назад

Thank you 😀😀 I have created my youtube channel and now I am learning and teaching at the same time.. you are my inspiration 👍😊

@Karan60191 3 года назад

Cha gye dost. Simple ek css se itna mast effect, try karta hun main bhi. Keep up the good work :)

@noeljohnmira6450 3 года назад

Thanks to this Page I learned something 😊❤

@OnlineTutorialsYT 3 года назад

You are so welcome

@fadihijazi8574 3 года назад

really creative ! i loved ❤

@aviralkumar4637 3 года назад

awesome i can't imagine the it can be done with the css and html Thank You Sir

@saqibmabbasi 3 года назад

This is awesome, will definitely try it out

@SyedVkax 3 года назад

simply amazing..

@agadetr5149 3 года назад

As always Too good

@kimminhtuts 3 года назад

This is extremely good css trick. Thank you

@wandersonmaikon 3 года назад

You are monster! Congratulations.

@josephmakram4342 3 года назад

That's awesome i don't even think that it is possible with css 😍

@yaxrajdabhi4229 3 года назад

I can't bellive that anyone can use html and css as photoshop... Keep it up!!! love from gujrat.

@faizanali5435 3 года назад

I love your content. How creative you are. I will be grateful if you share some tips with us, so we can think like you 😍

@kalebsfamilyadventures1820 3 года назад

this is very helpful.. keep sharing.

@rudrakshyabehera5908 3 года назад

You got some serious skills with css.

@keycoding5379 3 года назад

Super sir your coding is like inspiration to me to code better ❤️❤️

@shreyasd4663 3 года назад

You are awesome. Have shared your video to a. Community of 10k people.

@cinero8375 3 года назад

unexpected amazing sir

@enkr1 3 года назад

Inspiration! 🔥

@sanpendima 3 года назад

Man its awesome and mind blowing... Keep it up bro

@ibrahemmagdy8493 3 года назад

Very good thank you for this channel bro❤❤

@yashpandey9181 3 года назад

sir how u became that perfect in css.....what are the resources of your learning?

@akshaymore1991 3 года назад

Lots of work. Aur kyaa.

@ahmedabd2259 3 года назад

Go throw a good up to date book (books have a lot to offer than courses) and practice ,repeat ...till you get good at it!

@indianathe3rd742 3 года назад

Pure creativity

@divyanshkumar3902 3 года назад

This is Cool👏👍

@whatyoubuild 3 года назад

Ekdam se vakt badal gaya jajbaat badal gaya oo bhai kya banaya hai Janab tucci great ho tohfa kabul hai hame😂🙏great great

@malo2013 3 года назад

amazing ^.^, thank you

@BhupeshRajShakya 3 года назад

I have watched most of ur.videos u r really awesome and creative and y mix-blend is used??

@Frankslaboratory 3 года назад

Amazing what you can do with CSS

@OnlineTutorialsYT 3 года назад

Thank you

@emkhandigital 3 года назад

ALL HAIL CSS MASTER

@vishnuparegi4580 3 года назад

Interesting!!

@OnlineTutorialsYT 3 года назад

Glad you think so!

@satvikakoti1065 3 года назад

Hello.. I've tried this activity and it was an amazing tutorial!👍😊 But the background image of a portrait that I've used doesn't seem to be that clear although the css effect works..looks like it's opacity is very less... Any suggestions on how to resolve this problem?🤔 Thanks!

@skrcnbsky 3 года назад

Süper, başarılı

@youtubehelper227 3 года назад

Wow Amazing I like your video too much brother You are the best website designer I am also now learning css I am in css advanced I will finish that and I will Learn js can you please teach us java script please brother I also want to be a high quality website designer I have already learned html now I am in css and you are helping me and others by teaching us. THANKYOU VERY MUCH

@eugeneanikella7249 3 года назад

so good i love it

@sakshamjain3453 3 года назад

Great skills 👌👍

@justviewerfromindia2402 3 года назад

Superb creativity 😍😍😍

@enesyurtsever 3 года назад

You know this job 👍

@AnandYadav-dc9pf 3 года назад

You're awesome...

@minerobocraft 3 года назад

i thought it is a photoshop tutorial

@OnlineTutorialsYT 3 года назад

Both

@itsmetorque 3 года назад

Me too😂😂

@haizenash193 3 года назад

Very impressive.

@itbroprogramming2918 2 года назад

keep being creative

@matsukazetenma4558 3 года назад

Online Tutorials nice content... keep uploading

@kritikasharma9550 3 года назад

Amazing

@ronidey7100 3 года назад

Awesome!!!

@Heavyshitplayedallday 3 года назад

wow i like this

@ProCipher 3 года назад

COOL Vid bro :D

@asemkhaled9850 3 года назад

Very good work 👍👍👍👍

@nishantpacharne1569 3 года назад

You are awesome !!!!

@OnlineTutorialsYT 3 года назад

You too!!

@abdullahyaqoob6972 3 года назад

Can we do this on any face photo? It is necessary that The dimension of text pic and face pic should be same? Last question is that I have tried this on another pic but the text pic is covering whole screen. I just wanted on the face can u help ?

@budgeter4807 3 года назад

My teacher rocks😎😎

@lolow313 3 года назад

Wow thanks!

@rakeshpradhan1999 3 года назад

Ossam

@younessechchamsi3621 3 года назад

respect

@mahmoudadel6965 3 года назад

Great

@3MaD77K 3 года назад

Nice

@ismotarasrity4696 3 года назад

Thanks

@faraabs9122 3 года назад

super

@jebobo5886 3 года назад

Sir can you upload videos like this and please zoom it i can barely see the letters in Photoshop

@briankgarland 3 года назад

Cool. But it seems to be faster and easier to just save the image from PS.

@muhammadsufyan9508 3 года назад

😍

@christianfavara9032 3 года назад

Wow!!!! Si there a tutorial or website ti create text image?

@sanketmathur3072 3 года назад

Man how many years did it took you to get all these skills? I just get happy but making a few cubes revolve around my webpage 😂

@adityasingh0117 3 года назад

0:12 WHAT'S MEAN BY THIS.

@harryr7083 3 года назад

To be creative rather than copying the usual templates or someone else works.

@apponislam1086 3 года назад

which text editor is this?

@discontinuity 3 года назад

Better option here is to do the work in Photoshop and save one image file and render it instead of loading 2 files and using CSS to apply blend.

@omrishooshan9784 3 года назад

Im sure the main goal here is just for demonstration purpuses ,to show the broad abilities of css

@springbooksh 3 года назад

How do you made the text?

@Knuddelfell 3 года назад

Like 👍

@_Vikaspal_ 3 года назад

Sir I made my program on notepad...lekin overlapping nhi ho rhi h...kewal 1 image hi show ho rhi h...plz help sir?

@shrinivaskangralkar3088 3 года назад

Which application you are using ???

@OnlineTutorialsYT 3 года назад

Sublime text and photoshop

@shrinivaskangralkar3088 3 года назад

@md.maheebhossen8351 3 года назад

Sir, your works are very good. But I don't like music especially this one.

@raqaheisenberg 3 года назад

conatiner))

@rajashekhar433 3 года назад

Blend mode?

@nathanvda 3 года назад

Awesome! Also, I get it is a quick demo, but WTF writing a typo and then just leaving it in??

@amongdoomers9464 3 года назад

Creative ,but whats the bgm?

@suhaskj8111 3 года назад

May I know the name of background track?!

@pollettoimpanato 3 года назад

Warriyo - Mortals feat. Laura Brehm

@muhammadhammad1700 3 года назад

Great sir plz share source code link in video discription .

@afifayousuf2357 3 года назад

I am third

@_Vikaspal_ 3 года назад

Si I dont know how lekin meri 1 image hi dikh rhi h...overlapping nhi ho paa rhi ...can you plz help?

@priyeshvikramsingh8587 3 года назад

can u give coupon code for course?

@Knuddelfell 3 года назад

Why u added the video 3 time to the playlist xd

@teacherchad2777 3 года назад

How do I contact you to do some custom work for me?

@OnlineTutorialsYT 3 года назад

Sorry bro... I have no time for other work..

@teacherchad2777 3 года назад

@@OnlineTutorialsYT AAGGGHHHHH!!! I need help and will pay. You do really good work. Thx anyway :(

@Shivamjarora 3 года назад

Its not working. When I write code in .container img in css both the images get disappeared from screen.

@ClovisJuniorbr 3 года назад

Do u accept develop my landpage?

@abdelazizsami124 3 года назад

When click in any empty place in site all background color will change This is how ? I wanna know the idea

@OnlineTutorialsYT 3 года назад

In this work???

@OnlineTutorialsYT 3 года назад

My cursor is not clickable because of tag...

@OnlineTutorialsYT 3 года назад

Please add pointer-events:none; for img

@abdelazizsami124 3 года назад

No This is idea I saw it in a site When i click in any empty place All background color will change So i wanna know this idea

@abdelazizsami124 3 года назад

And when i reload the page color will change too So how this idea made ?

@shivanigoyal0906 3 года назад

I tried the same thing but not working.... please help me

@jassiprasad9377 3 года назад

I coludn't get it...😥

@mustafamontaser4955 3 года назад

Name of the song please 😁

@smf722 3 года назад

Jebote pas!

@tejaswaran7935 3 года назад

Are u a ui/ux designer or front end developer 😄

@mathotaure 3 года назад

I didn't expect to this. You should arrange the text yourself. Photoshop or other image editors are better in this case. unnecessary manipulation with css could slow down your website.

@gyorgykomaromi994 3 года назад

But why would you do this? You can do it in photoshop and have one single image... If you do this effect in css the browser has to load 2 images and apply the transformation as well, that is inefficient. In a bigger projects or if the client has slow connection it might even add delay. Why bot just use the image from photoshop and the browser has to load a single image and thats it

@OnlineTutorialsYT 3 года назад

It depends on you which one you will choose...i just tech you both ways...using html css and photoshop Thanks for comment

@Knuddelfell 3 года назад

conatiner