You can apply the blur filter on a pseudo element and stack it behind the .sub-menu content :
You can remove the JS positioning by using the CSS transform-origin property. You can set it on the left of the first and second bars with transform-origin: 0 50%;.
This way they will cross each...
You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element.
If you can remove the br tag, you can achieve this with the text-indent property (more info on MDN)
<p>1.2 text text text text text...
You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn't allow curved shapes.
You can use a rotated pseudo element with borders :
Based on this answer :
The "choppy" effect is created because of the default animation-timing-function (ease), you should set it to linear.
Also there is no point in specifying states at 20%, 40%... for the keyframe...
You can use margin-right:-100%; and vertical-align:middle; on the :after pseudo element. (Based on this answer: Line separator under text and transparent background) :
If you want to move you element in a 3d environement, you can use the perspective property and actual 3d rotation.
Right now you are animating on straight lines between positions so simulating a...
What you call "HTML block elements" are elements who have their display property set to block so there is no difference between a <div> and a <span> with display:block;.
You need to specify the transform-origin to 0 50%;.
Note that transforms normaly don't apply on inline elements like <span> so I changed it's display property to inline-block;...
You can achieve this with CSS but SVG makes it much easier :
<svg viewbox="0 0 100 50">
A solution could be to use an absolutely positionned pseudo element and apply a border to it on hover.
You can give the pseudo element top/bottom and left/right values that compensate the margins...
Here is an idea of how you can achieve this layout with an inline svg.
In the SVG :
The first path is the line with the indented circle. The indented circle is created with an arc command
Another approach would be to use SVG. The segments are made with <rect /> elements and they are clipped to a circle using the <clipPath/> element...
You can achieve this shape with 2 3d transformed pseudo elements :
padding: 20px 50px;
For versions of chrome that support -webkit-clip-path, you can clip the child at the same boundaries as the parent and prevent the cursor change outside the parent :
You could handle the animation with transforms and transitions : (Hover the circle)
Although CSS can do this, there is another approach that allows more flexibility : SVG
This approach allows :
The shape addapts its size to the size of the content
Allows any kind of...
You can achieve the transparent text with text-stroke with an inline svg :
You can with multiple box-shadows.
Each side is made with one box-shadow
This requires a fixed height for the input
You can use the :before pseudo element instead of the :after pseudo element so the line is displayed on top of (before) your link:
You just need to position the arrow according to the right side of the tag with the right property instead of the left property :
margin: 0 5px 0 10px;
You can use a pseudo element for all the background and hide the overflowing parts with the overflow property on the element.
This will prevent element and pseudo element background overlapping...