Hazantip

UI Kit

How to stylize your inputs.

Hide inputs and work with <label for="#">

Compability: even IE8+;

A Pen by Viacheslav on CodePen.

Hazantip

CSS Pattern

Mountains ornament

It became like this after transformed from rhombus. Just add background-position for first two gradients.

A Pen by Viacheslav on CodePen.

License.

Hazantip

CSS Pattern

Shuriken ornament

This is a six triangles. They became triangles, when add a true deg value (for example: 45deg - triangle, 135deg - triangle (45+90), 225deg- triangle (135+90)... ),

Hazantip

Custom shadows

Used a styles: :before, :after, transform: rotate, z-index

A Pen by Viacheslav on CodePen.

Hazantip

class Frame extends Component {
  componentDidMount() {
    this.iframeHead = this.node.contentDocument.head
    this.iframeRoot = this.node.contentDocument.body
    this.forceUpdate()
  }

  render() {
    const { children, head, ...rest } = this.props
    return (

Hazantip

<!----------------------------------- HTML -->

<a class="rabbi-logo__link" href="http://www.rabbi.co.il" target="_blank" rel="noopener noreferrer">
  <i class="rabbi-logo__icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 37.8" width="18px">
      <g class="r">
        <path d="M17.9,16.6c3.2-1.4,5.3-3.9,5.3-7.9V8.7c0-2.5-0.8-4.5-2.3-5.9C19.2,1,16,0,12.1, 0H0v25.4h15.4H24L17.9,16.6z M15.6,9.2c0,1.9-1.4,3-3.8,3H7.7V6.1h4.1C14.1,6.1,15.6,7.1,15.6,9.2L15.6,9.2z"></path>
      </g>
      <g>
        <polygon points="7.7,37.8 15.3,25.4 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 7.7,13.1 0,25.4 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8 7.7,37.8" style="fill: rgb(69, 198, 231)">