Advanced HTML5 & CSS3 techniques.. how do the do this?

HTML & CSS
1

Hi Guys,

It’s pretty frustrating that i don’t know how to create these CSS3 advanced techniques in HTML… i have no problem creating complete websites, but when it comes to special or advanced skills i get stuck… and i am really wondering what attributes are the using and how it’s actually made… do the use margins… paddings… display; absolute, responsive… etc etc to accomplish these effects? I watched a lot of movies in HTML/CSS3 designs… but i never seen that in the movie advanced topics are being discussed on how to create cool effects.

Some examples:
1: How in gods name do the do this? inside a DIV creating these round icons… to perfectly align them?
http://s9.postimg.org/hf407atun/image.png

2: How do the create this effect to show text like this?
http://s9.postimg.org/r7b9qou5b/image.png

3: How do the add this line thru this button?
http://s9.postimg.org/5r9ycr4pr/image.png

4: Or how do to create these boxes to GET outside the DIV?
http://s9.postimg.org/l2jrdd21q/image.jpg

5: or this yellow line ?
http://s9.postimg.org/rhisa18rj/image.png

So i hope somebody understand what i am talking about… i know about 90% in CSS/HTML but i get stuck at that ADVANCED level… CSS…

Can somebody give me a good answe or help me try to explain on how and what CSS attributes the use to get these effects.

Thanks.

2

There is more than one way to skin a cat.

If you give us the websites where they use these techniques we can tell you more. Otherwise we would be purely speculating as to how they did it (unless that’s what you want?)

PS - your 4th image isn’t working.

3

Hi,

Take a look here:
http://149.210.168.31/~shokunin/sheisfilm/

and:

http://www.alveos.nl

I am totally not a beginner at HTML/CSS but i really get stuck when it comes to very ADVANCED techniques.

Thanks in advance for looking

4

To be quite honest, I don’t think you should worry about really advanced CSS. Learn the fundamentals. Most “advanced” techniques are very simple.

That line can be done many of ways. They put the yellow line on a :before pseudo element and has it extend 100%, then they have the box centered as well in a DIFFERENT element (completely unerlated) and allow the overlap.

The circles are just images.
http://alveos.nl/wp-content/themes/alveos_tryout/img/MainButtons/ConceptStrategy.png

They can be centered very easy (not even advanced). All those LIs are holding each image. Set the LIs to inline-block and set the parent UL to text-align:center. I even use it on my website.

Stuff really isn’t as advanced as you may think. They just make it look good.

5

Thank you… and how about those YELLOW lines thru the BUTTON? or those boxes? which are overlappig a DIV?

6

We stll talking about the first link you gave?

The yellow line is hte one overlapping the box. The box is just sitting there twiddling its’ thumbs.

To be honest it doesn’t matter which one overlaps which. Just as long as one of them do it.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.