I want to create buttons as seen in the following picture. But I don't have any idea, on how to reach this. So the buttons shouldn't simply be rotated, but the horizontal edges shall remain horizontal.
Can someone give me a hint or a keyword for this issue?
Thanks!
The easiest way to create that sort of thing in the modern web is to use a clip path. Something like:
clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
Pair that with a transform: rotate on the text and voila.
It looks like your screenshot comes from a website. You can use the dev tools to inspect the buttons to see how they did it.
You can use the transform: skew CSS proportion to skew the whole container.
It retains all functionality of the buttons, including hover effects etc.
Transform is a really powerful option in CSS. Here is a little article on w3schools about it: Link
If you only want to rotate it(It's a bit hard to see if it is just rotated or skewed), something like an absolute positioned after element applied to the container with a transform: rotate might be an option, which will not rotate or move the buttons.
Related
I am trying to learn a little CSS trick using Text overflow: clip.
My aim is to create a title, of which the first one-and-a-half characters are visible, and the rest is clipped off. Using a small tilted divider line and the rest of the text has the first character clipped off.
I am stuck on how to make this look good and I have only managed to make the text clipped using a px or percentage value. I have not yet managed to get it clipped in an angle. -What would be the best way to tackle this?
Here I've included an example of what I want to try and write. Any help would be greatly appreciated!
Example
Thanks! Wick.
You can try using css clip-path . Eg:
clip-path: polygon(0% 0%, 100% 100%, 0% 100%, 0% 100%);
You can read more about it in the MDN docs and modify as per use.
I am rather new to CSS, and I was wondering if it is possible to crop an image to make dynamic shapes on my website. Instead of just having a rectangle or square for the photo, I want to be able to cut into it diagonally that matches the color of the sidebar, along with angled text right under. Is it possible for me to dynamically crop the image like this? Or would I have to make use of shapes and overlay them over the image?
An example of a mockup I made, I would like to be able to either crop the image to be slanted like this or overlay a shape to make it look more dynamic.
As #tacoshy mentioned you can use clip-path for creating in place image clipping, a pretty cool tool that can help you with creating complex clipping paths is https://bennettfeely.com/clippy/
Example:
.image-shape {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<img class="image-shape" src="https://image.uniqlo.com/UQ/ST3/eu/imagesother/2020/ut/gaming/pc-ut-hero-mario-35.jpg" alt="Mario" />
More info about the clip-path property https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
I know there are a lot of topics covering blur caused by CSS animations, but I seem to have come across a rather unique use case where every solution I've come across simply doesn't work.
I made a codepen showing a minimalist setup of my exact issue:
Codepen
Basically, I have a div with opacity 0.95 that is skewed by 10 degrees, and whose inner content is skewed by -10 degrees (so that it appears upright). Within this content there is a paragraph at the bottom. When you hover over it, it triggers an animation of the paragraph being shifted to the right. Unfortunately this makes all the text on the page blur.
Note that removing either both skew transformations or the opacity setting make the text not blur anymore.
This is probably caused by the skew and the reverse skew that force the browser to accelerate the process. But you don't have to apply two skews to get this result, you can also use a gradient background
background:linear-gradient(170deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 164px, #a3d5d3 163px, #a3d5d3 calc(100% - 165px), rgba(0,0,0,0) calc(100% - 165px), rgba(0,0,0,0) 100%);
I have a unique situation, instead of doing a modal to display some options I'm trying to use some 3D transforms to have a "flipping" motion which shows some inputs on the "back" of a view.
I have created a codepen to show the functionality as well as the issue.
The issue is when I flip over the div the bottom half of my back-facing form is not clickable, almost like it has some element on top of it that I can't see. It is exactly the bottom 50% that is not editable so I'm guessing something with how I'm doing my rotation is wrong.
http://codepen.io/CollinEstes/pen/qcwhd
I was able to fix your example: http://codepen.io/MikeFielden/pen/haHrG
All I ended up doing was change your rotateX(180deg) to rotateX(-180deg) and that appears to clear it up. As for why its doing this I cannot say. A browser bug perhaps?
I need to recreate the following design using only CSS:
What you're seeing in the picture is the top of a website container - the "links" are part of the main menu.
As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image.
For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple browsers.
I was thinking along the lines of a positioned and rotated div with a white background and a box shadow, but I haven't been able to build it yet.
Any ideas?
There is something called Sandpaper that can help you to transform your elements, even in IE!
.myDiv {
-sand-transform: rotate(45deg);
}
You can just plug it into your site and you're set.
Also you can use CSS3 transforms, which you asked about in your question: "Using nothing but CSS."
To do this you'd use:
.myDiv {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}
And thanks to Josh and Robert for the Opera equivalent:
-o-transform: rotate(45deg);
Internet Explorer will drop ClearType on any text that has a filter applied to it. But you can add empty extra element inside the main one and apply filter to this extra element. After this ClearType will be not ruined and the same result can be achieved.
For rotation, you're looking for:
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
Keep in mind, that the rotation is a CSS3 attribute, so you're not going to get the same behavior across all browsers. Rather than making just the slant with an image, it would probably be better to recreate the whole outline. I'd approach it with:
The header section, which would have the slant, shadow, the menu background and the padding at the top of the content, pretty much like your screenshot there.
An image that can repeat-y down the entire body of content with a shadow.
The footer section.
You can also use external libraries to attempt to recreate CSS3 attributes, but images may be the easiest way as you know how they'll render.
I think you can use the techniques from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
This is a really nice compilation and inspiration for using CSS. Enjoy.
PS: it is safer than CSS3 transforms.
Rotation seems unnecessary. I would try using a CSS triangle effect.
I'm going to assume your links are in a ul so your css could select ul:before and make it into the correct shape.
I don't know what will happen with the box-shadow but it might be worth a shot, and will probably be easier to align in IE without resorting to JavaScript.