bsakhanov

animals! -- Tree list

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

Horizontal tree table, organization structure-2

A Pen by Beibit Sakhanov on CodePen.

License.

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

<!-- 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

First-letter, Uikit 3

A Pen by Beibit Sakhanov on CodePen.

License.

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

<canvas id="canvas"></canvas>

bsakhanov

<nav data-uk-sticky id="items" class="uk-navbar">
  <label class="uk-navbar-content uk-hidden-small">Filter:</label>
  <ul class="uk-navbar-nav uk-hidden-small">
    <li data-uk-filter="" class="uk-active"><a href="#">ALL</a></li>
    <li data-uk-filter="blue"><a href="#">BLUE</a></li>
    <li data-uk-filter="green"><a href="#">GREEN</a></li>
  </ul>

  <label class="uk-navbar-content uk-hidden-small">Sort:</label>
  <ul class="uk-navbar-nav uk-hidden-small">

bsakhanov

doctype html

//- logo
- var logo_white="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png"

.uk-offcanvas-content
  // menu position. delete .uk-light to change black navbar to white (also you should change logo to dark one)
  //- https://getuikit.com/docs/sticky#responsive
  nav.uk-navbar-container.uk-light(uk-navbar="mode: click" uk-sticky="animation: uk-animation-slide-top; show-on-up: true")
    // logo or title