How to Get Cut Out Text Effect Like This Using CSS/CSS3 Only

Is it possible to get cut out text effect like this using CSS/CSS3 only?

This should work:

Here's a little trick I discovered using the :before and :after pseudo-elements:

http://dabblet.com/gist/1609945

Cut out text in CSS. Possible?

You can fake it by using the text transparency KP mentioned. First, you apply the same gradient to the span as you have on the outer div. Then, you apply the blue background to the inner div and the text will look like it's been knocked out. I have a sample fiddle here. Here's an article that details the technique.

Remember, this first technique will NOT work in IE. If you do want to achieve a similar effect in IE as well you can use the technique shown here. This technique requires a png, and some extra markup but it does appear to work everywhere. Since this isn't a real text mask, you may have to play with it a bit to get it just right.

Update: Further testing shows that Firefox doesn't display the first technique... I would stick with the second but then it's no longer just CSS, it does require an image.

How to make text exactly like this?

Because the text has an inner-shadow, this is pointing towards a graphics suite (Photoshop, Gimp, Corel, etc), unless there is a new flash or js library out there that adds inner shadows or gradients to text.

Using graphic suite, here are the steps to make text like this:

• Open Adobe Photoshop
• Create a the graphics desired with a mix of font, color, and styles
  -You can also spend this time creating hover/selected styles as well
• Export as a PNG-24 without a background (if you want to be able to use it on a variety of backgrounds. If not, make sure your bkgnd color matches where it will be positioned)
• Add to your web page
• Pat yourself on the back for doing something awesome.

Transparent text cut out of background

It's possible with css3 but it's not supported in all browsers

With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<h1><span>ABCDEFGHIKJ</span></h1>

Fading out text on overflow with css if the text is bigger than allowed

Looks like your requirement is just to fade out the text beginning at a certain height (about 150px), the text (if any) presenting at that height is considered as overflow. So you can try using some kind of transparent linear gradient layer placed on top of the text area, we can achieve this in a neat way using the pseudo-element :before like this:

.row:before {
  content:'';
  width:100%;
  height:100%;    
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

Fiddle

Text cutting a pixel line out of the background

It seems to almost certainly be a display bug. Based on the following solutions that also solved the issue, I suspect that there is a slight 1px overlap of the text inside the li into the ul that shows up during the animation back causing the ghosting to happen. When I select the li with the inspector tool in Chrome and it highlights the selection in blue, I believe I can even see the 1px overlap of the k.

I'm not sure I could give a better explanation than that--just seems to be a bug on the sizing of the li with the text font.

However all the following may be more elegant solutions to your issues than the pseudo-elements:

#1 Add padding-right: 1px

This worked on either the .text (ul) element (example) or the li element (example).

#2 Add overflow: hidden

This is to the .text (ul) element (example).

#3 Add a right border that is transparent

Putting a border-right: 1px solid transparent with a margin-right: -1px to offset the effect (if needed) also solve it whether on the ul (example) or the li (example).

#4 Add a margin-right: 1px

This only works on the li (example).

Conclusion

Basically, with your original pseudo element solution and the above, it seems that anything giving a buffer to that right edge prevents the bug from happening.

CSS knockout text effect + text-shadow on a background image

Starting from Hunter Turner answer, it's possible to improve it with CSS Blend Mode. This way the background image of the container can be blended to the text, resulting in what you wanted to do. However, remember it hasn't broad support yet.

html, body {  margin: 0;  padding: 0;}
.container {  width: 400px;  height: 200px;  display: flex;  justify-content: center;  align-items: center;  background: url('http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg');  background-size: contain;}
.container p {  font-weight: bold;  font-size: 60px;  font-family: Helvetica, Arial, sans-serif;  color: rgba(255, 255, 255, .45);  text-shadow: 4px 4px 6px #fff, 0 0 0 #000, 4px 4px 6px #fff;  mix-blend-mode: multiply;}

<div class="container">  <p>Hello World</p></div>

CSS3 curved cutout from div?

EDIT - NEW Solution

with radial-gradient, it is possible to achieve new levels of quality in cutout divs: Running Demo

Read more on https://stackoverflow.com/a/18853833/1654265

---

OLD Solution

You can do it with an homogeneus background, not with an artistic one like your. There are things that CSS will never do, for example becoming Photoshop.

However, you can do the trick using borders, negative margin and z-index;

Demo: http://jsfiddle.net/cB8Qq/

HTML

<body>
    <div class="container">
        <div class="rounded">bla bla bla</div>
        <div class="digged"> <br/><br/>or yada yada yada </div>
    </div>
</body>

CSS

.container{
    text-align: center;
    background: #ddd;    
}

.rounded{
    margin: 0 auto;
    border-radius: 50px;
    width: 200px;
    height: 30px;
    background: silver;    
    padding: 10px;    
    border: 10px solid #ddd;    
    z-index: 1;
    position: relative;
}

.digged{    
    margin: 0 auto;
    background: silver;
    width: 400px;
    height: 100px;
    margin-top: -30px
}

How to strike through obliquely with css

There is a hacky way to do this, using the :before pseudo element. You give the :before a border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.

Here's a demo

Caveats

• This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that do support :before but don't support CSS transforms.
• The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.

CSS

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

HTML

<span class="strikethrough">Deleted text</span>

---

Related Topics