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.
Related
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 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.
I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:
background color
dot color
dot size
space between dots
Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:
https://jsfiddle.net/yzpuydtn/
body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;
}
Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.
Using %: https://jsfiddle.net/yzpuydtn/11/
Using vw: http://jsfiddle.net/otwhu0uk/2/
Here is an example. I really hope this helps you.
body {
/* Controls size of dot */
background-image: radial-gradient(black 5%, white 0%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size:5% 10%;
}
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%);
Before to ask my question, take a look at this: http://db.tt/IdmsYZYS
I have some trouble with let black image touch the bottom, the top and the right side of the text box. So that in fact the black image will cover the whole right part of the spitted box.
I am using Wordpress. Maybe you have some tips for me. But just HTML code is also great.
Thansk a lot for helping me!
You can't set an element to have 100% height within a container that has a fluid height. You should try using the Faux Column technique, which solves your problem.