Is There Any Sharp Style in CSS

Is there any sharp style in CSS?

Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.

For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.

How to make font sharp in CSS?

In addition to the CSS3 text-rendering property AMK mentioned, there is also a Webkit (Chrome) specific hack for antialiasing: -webkit-font-smoothing: antialiased; (I believe the default value is subpixel-antialiased) which is nice to use since Webkit webfont rendering can be less than ideal on Windows machines in particular. A bit more info can be found here.

There is also an old proposed font-smooth CSS3 property (see here) but as far as I know it is not implemented and doesn't do anything (at least not that I can see).

The sad reality is that you won't get Photoshop-quality font rendering on the web, especially not on a Windows machine. You can make up for this by choosing good webfonts and picking font sizes that naturally scale nicely, but there's only so much you can do.

How do I make CSS sharp V like horizontal corners for `legend` and `fieldset`?

In general, you need to set some content with the css pseudo elements :before or :after. Then by setting the border widths for top/bottom you can create a triangle shape.

See css-triangle demo, or below example.

#FieldsetSeekBox {  padding: 8px 1px;  border: 1px solid #a1a1a1;}
#LegendStyle {  border-style: none;  background-color: #a1a1a1;  font: bold 13px Tahoma, Arial, Helvetica;  color: #000000;  padding-left: 10px;  position: relative;}
#LegendStyle:after {  content: " ";  display: block;  position: absolute;  right: -10px;  top: 0;  border-top: 8px solid transparent;  border-bottom: 8px solid transparent;  border-left: 10px solid #a1a1a1;}

<fieldset id="FieldsetSeekBox">  <legend id="LegendStyle">  Web Search  </legend>  <input type="text" name="u" size="70" value="" placeholder="Type your Search here and click Search..." id="SeekBox"></fieldset>

sharp edges with CSS

Instead of using pseudoelements you can try to use clip-path. In the next example I'm using clip-path with a polygon function. The vertices of the polygon are groups of 2 values, one for the x and one for the y coordinate. The vertices are separated by commas

 h1{
    width:150px;
    height:100px;
    background-color:#ff5722;
    margin:20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color:white;
    
   -webkit-clip-path: polygon(0px 0px, 75px 15px, 150px 0px, 135px 50px, 150px 100px, 75px 85px, 0px 100px, 15px 50px, 0px 0px);
    }

   

<h1></h1>

Is there a way to create css sharp corners for button with border?

There is no CSS rule to do it, but it is possible. You would need a inline-block or block element for your button, with a border on the left and right side. Then, you would need to place (with absolute positioning) two pseudo-elements ::before and ::after on the top and bottom part of the container. Simply add perspective and rotate the X value of the elements accordingly and you're good to go. It might not be "pixel perfect" on every device but it'll look damn near perfect on most recent devices and browsers.

You can have a look at these hexagonal buttons I made a little while ago to get a better idea: https://codepen.io/chriskirknielsen/pen/MpXKVV

EDIT: Here's a code snippet instead of a Codepen link:

*, *::before, *::after {  padding: 0;  margin: 0;  box-sizing: border-box;  transition: .25s all .02s ease-in-out;}
body, html {  text-align: center;  font-family: sans-serif;  font-size: 32px;  background-color: #123143;  height: 100%;}
.button--hexagon {  position: relative;  margin: 1rem auto;  text-align: center;  font-size: .5rem;  line-height: .5rem;  vertical-align: middle;  color: #ffce00;  display: inline-block;  border-width: 0;  border-style: solid;  border-color: #ffffff;  padding: .5rem;  cursor: pointer;  background: transparent;  width: calc(100% / 6);}
.button--hexagon span {  z-index: 20;  position: relative;}
.button--hexagon::before, .button--hexagon::after {  content: '';  position: absolute;  border-color: inherit;  border-style: inherit;  height: 50%;  width: 100%;  left: 0;  z-index: 10;  background-color: rgba(18, 49, 67, 0.75);}
.button--hexagon::before {  border-width: 2px 2px 0 2px;  top: 0;  transform-origin: center bottom;  transform: perspective(0.5rem) rotateX(3deg);}
.button--hexagon::after {  border-width: 0 2px 2px 2px;  bottom: 0;  transform-origin: center top;  transform: perspective(0.5rem) rotateX(-3deg);}
.button--hexagon:hover {  color: #123143;  border-color: #ffce00;}
.button--hexagon:hover::before,.button--hexagon:hover::after {  background: #ffce00;}

<button class="button--hexagon"><span>Some text</span></button> 

Rectangular border style with sharp corners

You need to override border radius, in your code both border-radius and -webkit-border-radius are set to 12px:

.pds-box {
    border: 1px solid #CCC !important; 
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}​

Does CSS support text anti-aliasing such as crisp, sharp etc yet?

Not only is it not possible, but different browsers on the market enforce different antialiasing settings, meaning that you can't get consistent results, even if they are not what you want.

For a good article on how the various browsers deal with font rendering, I'd suggest reading this: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

---

Related Topics