bsakhanov

CodePen Challenge: Color Pop

Using animated svg filters and css blend modes to create a distortion effect on a photo.

Btw, don't pay too much attention to the text. I don't speak Khmer, I just think it looks neat.

Also, this does work in Chrome 71 and Firefox Dev Edition 66 on Mac but does not work on any mobile browser I've checked.

A Pen by Beibit Sakhanov on CodePen.

bsakhanov

First-letter, Uikit 3

A Pen by Beibit Sakhanov on CodePen.

License.

bsakhanov

<!-- Inspired by https://codepen.io/eeeps/pen/dqepQm -->

<svg viewBox="0 0 800 532">
  <filter id="pixels" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
	<feFlood flood-color="green" flood-opacity="1" x="0" y="0" width="1" height="1" result="flood"/>
	<feComposite 
      id="composite"
      in="SourceAlpha" in2="flood" operator="in" x="0" y="0" width="6" height="6" result="composite"/>
	<feTile x="0" y="0" width="1000" height="1000" in="composite" result="tile1"/>
	<feComposite in="SourceGraphic" in2="tile1" operator="in" result="composite1"/>

bsakhanov

Duotone Demo

Live demo for SVG duotone filters article: https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/

A Pen by Lentie Ward on CodePen.

License.

bsakhanov

Horizontal tree table, organization structure-2

A Pen by Beibit Sakhanov on CodePen.

License.

bsakhanov

<ul class="treeCSS">
  <li><b>Руководитель</b>
    <ul>
      <li>1-й Заместитель </br>руководителя
        <ul>
          <li>Директор </br>1-го департамента
                    <ul>
          <li>начальник </br>1-го отдела
          <li>начальник </br>2-го отдела
          <li>начальник </br>3-го отдела

bsakhanov

animals! -- Tree list

A Pen by Beibit Sakhanov on CodePen.

License.

bsakhanov

<div class="raz">
  <a href="#">Красота</a>
    <span>
      <a href="#">Волосы</a>
      <a href="#">Лицо</a>
      <a href="#">Макияж</a>
      <a href="#">Тело</a>
      <a href="#">Косметология</a>
      <a href="#">Диеты</a>
      <a href="#">Фитнес</a>

bsakhanov

<div class="raz"><a href="#">Красота</a><span><a href="#">Волосы</a><a href="#">Лицо</a><a href="#">Макияж</a><a href="#">Тело</a><a href="#">Косметология</a><a href="#">Диеты</a><a href="#">Фитнес</a></span></div>

bsakhanov

Drop-down table / CSS

A Pen by Beibit Sakhanov on CodePen.

License.