Ryan Web Tech
Ryan Web Tech
  • 57
  • 148 005
Create a Custom Scrollbar in Pure CSS
In this video, let's customize the scrollbar using a few CSS pseudo elements.
Get the code here - codepen.io/ryandsouza13/pen/LYLxOXM
Find me here:
Twitter: ryanwebtech1
Instagram: ryanwebtech1
Codepen: codepen.io/ryandsouza13/
Dev Community: dev.to/ryandsouza13
มุมมอง: 467

วีดีโอ

A Simple Tooltip Using HTML and CSS
มุมมอง 8753 ปีที่แล้ว
In this video, let's create a simple tooltip using HTML and CSS. We'll have a look at 3 different ways to display the tooltip. The first two ways, will involve only CSS. However, the 3rd one uses just a few lines of JavaScript. Get the Code Here - codepen.io/ryandsouza13/pen/wveBrKp Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryands...
Scroll to Top Button Using HTML, CSS and JavaScript
มุมมอง 1563 ปีที่แล้ว
In this video, let's create a simple scroll-to-top button using HTML, CSS and just a few lines of JavaScript. Get the code here - codepen.io/ryandsouza13/pen/zYzYrEb Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
A Simple Slider Using HTML, CSS and JavaScript
มุมมอง 1703 ปีที่แล้ว
In this video, let's create an auto slideshow using HTML, CSS and JavaScript. Get the code here - codepen.io/ryandsouza13/pen/gORYMYN Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Calculate the Number of Characters Using JavaScript
มุมมอง 1833 ปีที่แล้ว
In this video, let's have a look at how we can calculate the total number of characters, excluding the spaces, using JavaScript. Get the code here - codepen.io/ryandsouza13/pen/MWmNOVG Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Show Hide Password Using HTML, CSS and JavaScript
มุมมอง 5833 ปีที่แล้ว
In this video, let's have a look at how we can implement the show/hide password functionality using HTML, CSS and JavaScript Get the code here - codepen.io/ryandsouza13/pen/ZEKNYzE Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Detect Online/Offline Status using JavaScript
มุมมอง 1.2K3 ปีที่แล้ว
In this short video, let's have a look at how we can detect the online/offline status of a user. Get the code here - codepen.io/ryandsouza13/pen/MWbjEYX Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Pure CSS Image Slider
มุมมอง 5973 ปีที่แล้ว
In this video, let's create a simple image slider in HTML and CSS. Get the code here - codepen.io/ryandsouza13/pen/BaQzbGg Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
3 Simple Techniques to Create a Text Stroke in HTML and CSS
มุมมอง 5K3 ปีที่แล้ว
In this video, let's have a look at 3 different techniques to create a text stroke in HTML and CSS. The techniques discussed in this video are. 1. Using the -webkit-text-stroke CSS property 2. Using the text-shadow CSS propety 3. Using an SVG Get the code here - codepen.io/ryandsouza13/pen/vYyNvqe Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: co...
Gradient Background Generator in HTML, CSS and JavaScript
มุมมอง 1K3 ปีที่แล้ว
In this video, let's create a simple gradient background generator using HTML, CSS and just a few lines of JavaScript. Get the code here - codepen.io/ryandsouza13/pen/LYbpYZq Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Responsive Table Using HTML and CSS
มุมมอง 10K3 ปีที่แล้ว
In this short video, we'll build a simple responsive table using HTML and CSS. Get the code here - codepen.io/ryandsouza13/pen/zYKGrbQ Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Simple Accordion Menu Using HTML and CSS
มุมมอง 1624 ปีที่แล้ว
In this video, let's create a simple accordion menu using the HTML 'details' and the 'summary' tags. Get the code here: codepen.io/ryandsouza13/pen/wvGpoRp Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Community: dev.to/ryandsouza13
Marquee Effect in HTML and CSS
มุมมอง 19K4 ปีที่แล้ว
In this video, let's try creating a marquee text effect without using the HTML marquee tag. Get the code here - codepen.io/ryandsouza13/pen/ExKKrOj Written version of this tutorial - dev.to/ryandsouza13/creating-the-classic-marquee-effect-without-the-marquee-tag-4246 Find me here: Twitter: ryanwebtech1 Instagram: ryanwebtech1 Codepen: codepen.io/ryandsouza13/ Dev Comm...
Creating a Fake 3D Effect in HTML and CSS
มุมมอง 1.3K4 ปีที่แล้ว
Hi this video, we'll create a fake 3D effect. The idea for the video popped up when I came across an article titled 'Faking 3D Elements with CSS'. This article by, Bradley Taunt, is about creating a Fake 3D effect with 2 divs. Here is the link to Bradley's article. uglyduck.ca/fake-3d-elements-with-css/ Get the code here - codepen.io/ryandsouza13/pen/RwaPgbm Also, you can find the written versi...
Text Glow Effect using HTML and CSS
มุมมอง 4.7K4 ปีที่แล้ว
Let's create a simple text glow effect in just a few lines of HTML and CSS
Fold Effect Using HTML and CSS
มุมมอง 1.8K4 ปีที่แล้ว
Fold Effect Using HTML and CSS
Typing Animation Effect Using HTML and CSS
มุมมอง 4995 ปีที่แล้ว
Typing Animation Effect Using HTML and CSS
Responsive Video Background in HTML and CSS
มุมมอง 9K5 ปีที่แล้ว
Responsive Video Background in HTML and CSS
Flipping Card Animation Using HTML and CSS
มุมมอง 24K5 ปีที่แล้ว
Flipping Card Animation Using HTML and CSS
Knockout Text With a Video Background using HTML and CSS
มุมมอง 5785 ปีที่แล้ว
Knockout Text With a Video Background using HTML and CSS
Responsive Masonry Layout in HTML and CSS (2019)
มุมมอง 11K5 ปีที่แล้ว
Responsive Masonry Layout in HTML and CSS (2019)
CSS box-decoration-break property
มุมมอง 9875 ปีที่แล้ว
CSS box-decoration-break property
Gradient Text Using HTML and CSS (2019)
มุมมอง 6K5 ปีที่แล้ว
Gradient Text Using HTML and CSS (2019)
Image Hover Effect using HTML and CSS
มุมมอง 1835 ปีที่แล้ว
Image Hover Effect using HTML and CSS
Shiny Hover Effect on a Button
มุมมอง 1.6K5 ปีที่แล้ว
Shiny Hover Effect on a Button
Sidebar Shifting the Main Content Area
มุมมอง 7125 ปีที่แล้ว
Sidebar Shifting the Main Content Area
Pure CSS Accordion Menu
มุมมอง 1.8K6 ปีที่แล้ว
Pure CSS Accordion Menu
A Simple Expanding Search Box Using HTML, CSS and JavaScript
มุมมอง 3.7K6 ปีที่แล้ว
A Simple Expanding Search Box Using HTML, CSS and JavaScript
Blur the Rest of the Elements on Hover
มุมมอง 3.1K6 ปีที่แล้ว
Blur the Rest of the Elements on Hover
Button Hover Effects in HTML and CSS
มุมมอง 1616 ปีที่แล้ว
Button Hover Effects in HTML and CSS

ความคิดเห็น

  • @letsarray5712
    @letsarray5712 6 หลายเดือนก่อน

    I make you 1.000 subscriber from me

  • @Codewithakashui
    @Codewithakashui 6 หลายเดือนก่อน

    not support for FireFox give me any another scroll solution for Firefox

  • @Parzula
    @Parzula 8 หลายเดือนก่อน

    W

  • @null8637
    @null8637 8 หลายเดือนก่อน

    you never told how ajust the background vedio height and width ? its important part to make it responsive right?

    • @scafy03
      @scafy03 6 หลายเดือนก่อน

      same

  • @Heinous2Uranus
    @Heinous2Uranus 9 หลายเดือนก่อน

    I'm trying to accomplish this for a sentence in notepad but nothing works. what am i doing wrong?

    • @RyanWebTech1
      @RyanWebTech1 9 หลายเดือนก่อน

      All the three methods shown in this video use CSS properties that are supported by all major web browsers. So, it should work if you've followed the same steps as shown in this video. However, at times we all do tend to commit some tiny errors while liking our HTML files to our stylesheet. So, in case you are using an external stylesheet, check if any error was unintentionally done while liking it to the HTML file. Apologies for a delayed response though.

  • @Joohnyjohn
    @Joohnyjohn 10 หลายเดือนก่อน

    Great Video!

  • @timothybridge8662
    @timothybridge8662 11 หลายเดือนก่อน

    Thanks, man! Really cool effect!

  • @alex_3D_websites
    @alex_3D_websites ปีที่แล้ว

    Keep up the good work!

  • @seeker3794
    @seeker3794 ปีที่แล้ว

    Thank you very much.

  • @yaudi_
    @yaudi_ ปีที่แล้ว

    thanks for this👀

  • @inderpreetsingh8585
    @inderpreetsingh8585 ปีที่แล้ว

    loved it

  • @muhammaddawoodumar7613
    @muhammaddawoodumar7613 ปีที่แล้ว

    thanks bro

  • @mohamedyoussef8835
    @mohamedyoussef8835 ปีที่แล้ว

    Awesome video ++++++++++++++++++ 🙂

  • @Osirisdigitalagency
    @Osirisdigitalagency ปีที่แล้ว

    I’ve watched more than 6 videos .. this is the shortest and most informative.. ❤

  • @feedgaming8374
    @feedgaming8374 ปีที่แล้ว

    thank u so much

  • @mohdkaif2086
    @mohdkaif2086 ปีที่แล้ว

    Thanks for the help 👍🏼

  • @HabunoGD1821
    @HabunoGD1821 ปีที่แล้ว

    Good Job! Perfect...

  • @oussamagharrasse326
    @oussamagharrasse326 ปีที่แล้ว

    thank you brother you made this property easy for me to understand.

  • @hakuyoharimoto7428
    @hakuyoharimoto7428 ปีที่แล้ว

    awesome video! exactly what I needed

  • @mkajiwala1
    @mkajiwala1 ปีที่แล้ว

    Really simple, thanks

  • @bagadasatish50
    @bagadasatish50 ปีที่แล้ว

    vary good

  • @danyquintero3895
    @danyquintero3895 2 ปีที่แล้ว

    Thank you so much Dharm, you explain much better than my professor, hugs from Colombia 🇨🇴🔥

  • @Mathematics_Discuss
    @Mathematics_Discuss 2 ปีที่แล้ว

    Very simple and straightforward. Thanks for your time

  • @all-eter-4289
    @all-eter-4289 2 ปีที่แล้ว

    very clear thanks you!

  • @sanasafdar3984
    @sanasafdar3984 2 ปีที่แล้ว

    this is the easiest way i have seen .

  • @iq-dev
    @iq-dev 2 ปีที่แล้ว

    Straight to the point. Thank you.

  • @gowthamy3976
    @gowthamy3976 2 ปีที่แล้ว

    You are my master for me 💗

  • @gameaddic8293
    @gameaddic8293 2 ปีที่แล้ว

    What is your software name

    • @RyanWebTech1
      @RyanWebTech1 2 ปีที่แล้ว

      The code editor used in this video is called brackets. It is an open source code editor developed by Adobe. I rarely use it these days as I'm currently using VS code as my primary code editor.

  • @gameaddic8293
    @gameaddic8293 2 ปีที่แล้ว

    What is your software name

  • @Xcf_341
    @Xcf_341 2 ปีที่แล้ว

    I'm a crazy indian , ahhhhhhhhhhhh

  • @memo_force
    @memo_force 2 ปีที่แล้ว

    nice 👍

  • @shrekvsopogah1818
    @shrekvsopogah1818 2 ปีที่แล้ว

    How to make one button responsible for the sides and the second only for the center?Hope you will answer and thanks for the video it helps very much

    • @RyanWebTech1
      @RyanWebTech1 2 ปีที่แล้ว

      Hi buddy. Do you mean you want a radial gradient? If yes, then I think a similar approach can help. But, if wish to have a linear gradient with 3 color stops (left, center, right), then you can set one button for the left and the right color gradients together, while the other button for the center gradient color. In this case, the left and the right gradient colors would be the same. Let me know if this is what you needed.

    • @shrekvsopogah1818
      @shrekvsopogah1818 2 ปีที่แล้ว

      @@RyanWebTech1 Yes one button for the left and right and the other button for center

  • @messi_codes
    @messi_codes 2 ปีที่แล้ว

    thanks for wonderful video bro

  • @uemersonsouza9440
    @uemersonsouza9440 2 ปีที่แล้ว

    Excellent content! Keep up with your awesome job Rayan!

  • @niravprajapati6011
    @niravprajapati6011 2 ปีที่แล้ว

    awesome

  • @yishakabrham5002
    @yishakabrham5002 2 ปีที่แล้ว

    so helpfull thank you

  • @fazalkhan4965
    @fazalkhan4965 2 ปีที่แล้ว

    exactly what i was looking for. thanks a bunch ❤️

  • @falctronicme3380
    @falctronicme3380 2 ปีที่แล้ว

    how the code can detect smartphone there is one choice only, if there is any way to detect computer and smart phone learn us please

  • @dhanisthatripathi7765
    @dhanisthatripathi7765 2 ปีที่แล้ว

    thanks a lot it helped me

  • @shakiljoy8661
    @shakiljoy8661 2 ปีที่แล้ว

    Thank you so much.

  • @MuhammadAsif-mv2di
    @MuhammadAsif-mv2di 2 ปีที่แล้ว

    excellent way of delivering understandable stuff. thanks!

  • @marshalolu6810
    @marshalolu6810 2 ปีที่แล้ว

    Thanks so much, this really helped me with a project I've been working on. Great work.

  • @kiro665
    @kiro665 2 ปีที่แล้ว

    thx

  • @kiro665
    @kiro665 2 ปีที่แล้ว

    thx

  • @kiro665
    @kiro665 2 ปีที่แล้ว

    thx man

  • @ayshbabar
    @ayshbabar 2 ปีที่แล้ว

    Thank you so much Sir! I needed to make this for an assignment, and it works great!

  • @raguinfotech6639
    @raguinfotech6639 2 ปีที่แล้ว

    good explan bro👍🏽

  • @CubikTubik
    @CubikTubik 2 ปีที่แล้ว

    exactly what I need

  • @CubikTubik
    @CubikTubik 2 ปีที่แล้ว

    exactly what I need

  • @nikhilnikki9627
    @nikhilnikki9627 2 ปีที่แล้ว

    Height 100vh ? vh not px ? vh is same as px?

    • @RyanWebTech1
      @RyanWebTech1 2 ปีที่แล้ว

      Hi Nikhil. The unit vh stands for viewport height. Viewport can be defined as the visible part of the webpage you are currently viewing. So, 1vh is equivalent to 1% of the visible part. In our case, we are giving it a height of 100vh, which means covering 100% of the webpage that is currently visible.

    • @nikhilnikki9627
      @nikhilnikki9627 2 ปีที่แล้ว

      @@RyanWebTech1 thanks