CSS for the Blog

Alert and Warning

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/alert.min.css">
<div class="alert alert-success"><strong>🎯 SUCCESS!</strong> <br> Success text. </div>  
<div class="alert alert-info"><strong>📌 INFO</strong> <br> Info text. </div>  
<div class="alert alert-warning"><strong>⚠️ WARNING!</strong> <br> Warning text. </div>  
<div class="alert alert-danger"><strong>⛔ DANGER!</strong> <br> Danger text. </div>  
<p class="alert alert-danger"><strong>⛔ DANGER!</strong> <br> Danger text. </p>  
🎯 SUCCESS!
Success text.
📌 INFO
Info text.
⚠️ WARNING!
Warning text.
⛔ DANGER!
Danger text.

⛔ DANGER!
Danger text.

Inline Reference with <summary>

<link rel="stylesheet" type="text/css" href="https://rosyadi.com/file/css/inline3.css">
<div>
OK. This paper<details><summary>1</summary> Lowry, O. H., Rosebrough, et al. Biol. Chem. 193, 265–275 (1951).</details> describing an assay to determine the amount of protein in a solution.  
The sun is molten gold<details><summary>2</summary> it is not, actually</details> and a star.  
</div>

- The moon is a silver planet<details><summary>3</summary> according to nobody</details> and a star slave.
- This is another reference<details><summary>[4]</summary> something to refer</details>, thank you.
- Don't minify this css
- Put paragraph with `<div>` tag
OK. This paper
1 Lowry, O. H., Rosebrough, et al. Biol. Chem. 193, 265–275 (1951).
describing an assay to determine the amount of protein in a solution. The sun is molten gold
2 it is not, actually
and a star.
  • The moon is a silver planet
    <summary>3</summary> according to nobody
    and a star slave.
  • This is another reference
    <summary>[4]</summary> something to refer
    , thank you.
  • Don't minify this css
  • Put paragraph with <div> tag

Inline Reference with Tufte CSS

<link rel="stylesheet" type="text/css" href="https://rosyadi.com/file/css/tufte-im.css">
<p class="inline">(…) The lack of a clear definition
<input id="i1" type="checkbox"><label for="i1">1</label>
<small>Bautts, T. (2005) </small> is worrying.  The problem as said
<input id="i2" type="checkbox"><label for="i2">2</label>
<small> Raymond, Eric S. (1996) The New Hacker's Dictionary</small> should be addressed.
</p>

<p class="block">(…) The lack of a clear definition
<input id="b1" type="checkbox"><label for="b1">1</label>
<small>Bautts, T. (2005) </small> is worrying.  The problem as said
<input id="b2" type="checkbox"><label for="b2">2</label>
<small> Raymond, Eric S. (1996) The New Hacker's Dictionary</small> should be addressed.
</p>

<p class="hover">(…) The lack of a clear definition
<input id="h1" type="checkbox"><label for="h1">1</label>
<small>Bautts, T. (2005) </small> is worrying.  The problem as said
<input id="h2" type="checkbox"><label for="h2">2</label>
<small> Raymond, Eric S. (1996) The New Hacker's Dictionary</small> should be addressed.
</p>

(…) The lack of a clear definition Bautts, T. (2005) is worrying. The problem as said Raymond, Eric S. (1996) The New Hacker's Dictionary should be addressed.

(…) The lack of a clear definition Bautts, T. (2005) is worrying. The problem as said Raymond, Eric S. (1996) The New Hacker's Dictionary should be addressed.

(…) The lack of a clear definition Bautts, T. (2005) is worrying. The problem as said Raymond, Eric S. (1996) The New Hacker's Dictionary should be addressed.

Hover CSS

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/irosyadi/irosyadi@master/hover-im.min.css">  

Text Transitions

<a href="#" class="hvr-grow">Grow</a>  
<a href="#" class="hvr-shrink">Shrink</a>  
<a href="#" class="hvr-pulse">Pulse</a>  
<a href="#" class="hvr-pulse-grow">Pulse Grow</a>  
<a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>  
<a href="#" class="hvr-push">Push</a>  
<a href="#" class="hvr-pop">Pop</a>  
<a href="#" class="hvr-bounce-in">Bounce In</a>  
<a href="#" class="hvr-bounce-out">Bounce Out</a>  
<a href="#" class="hvr-rotate">Rotate</a>  
<a href="#" class="hvr-grow-rotate">Grow Rotate</a>  
<a href="#" class="hvr-float">Float</a>  
<a href="#" class="hvr-sink">Sink</a>  
<a href="#" class="hvr-bob">Bob</a>  
<a href="#" class="hvr-hang">Hang</a>  
<a href="#" class="hvr-skew">Skew</a>  
<a href="#" class="hvr-skew-forward">Skew Forward</a>  
<a href="#" class="hvr-skew-backward">Skew Backward</a>  
<a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>  
<a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>  
<a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>  
<a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>  
<a href="#" class="hvr-wobble-top">Wobble Top</a>  
<a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>  
<a href="#" class="hvr-wobble-skew">Wobble Skew</a>  
<a href="#" class="hvr-buzz">Buzz</a>  
<a href="#" class="hvr-buzz-out">Buzz Out</a>  
<a href="#" class="hvr-forward">Forward</a>  
<a href="#" class="hvr-backward">Backward</a>  

Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Horizontal
Wobble Vertical
Wobble To Bottom Right
Wobble To Top Right
Wobble Top
Wobble Bottom
Wobble Skew
Buzz
Buzz Out
Forward
Backward

Background Transitions

<a href="#" class="hvr-fade">Fade</a>  
<a href="#" class="hvr-back-pulse">Back Pulse</a>  
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>  
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>  
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>  
<a href="#" class="hvr-sweep-to-top">Sweep To Top</a>  
<a href="#" class="hvr-bounce-to-right">Bounce To Right</a>  
<a href="#" class="hvr-bounce-to-left">Bounce To Left</a>  
<a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a>  
<a href="#" class="hvr-bounce-to-top">Bounce To Top</a>  
<a href="#" class="hvr-radial-out">Radial Out</a>  
<a href="#" class="hvr-radial-in">Radial In</a>  
<a href="#" class="hvr-rectangle-in">Rectangle In</a>  
<a href="#" class="hvr-rectangle-out">Rectangle Out</a>  
<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>  
<a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>  
<a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a>  
<a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a>  

Fade
Back Pulse
Sweep To Right
Sweep To Left
Sweep To Bottom
Sweep To Top
Bounce To Right
Bounce To Left
Bounce To Bottom
Bounce To Top
Radial Out
Radial In
Rectangle In
Rectangle Out
Shutter In Horizontal
Shutter Out Horizontal
Shutter In Vertical
Shutter Out Vertical

Border Transitions

<a href="#" class="hvr-underline-from-left">Underline From Left</a>  
<a href="#" class="hvr-underline-from-center">Underline From Center</a>  
<a href="#" class="hvr-underline-from-right">Underline From Right</a>  
<a href="#" class="hvr-reveal">Reveal</a>  
<a href="#" class="hvr-underline-reveal">Underline Reveal</a>  
<a href="#" class="hvr-overline-reveal">Overline Reveal</a>  
<a href="#" class="hvr-overline-from-left">Overline From Left</a>  
<a href="#" class="hvr-overline-from-center">Overline From Center</a>  
<a href="#" class="hvr-overline-from-right">Overline From Right</a>  

Underline From Left
Underline From Center
Underline From Right
Reveal
Underline Reveal
Overline Reveal
Overline From Left
Overline From Center
Overline From Right

Border Transitions (better with button class)

<a href="#" class="button hvr-border-fade">Border Fade</a>  
<a href="#" class="button hvr-hollow">Hollow</a>  
<a href="#" class="button hvr-trim">Trim</a>  
<a href="#" class="button hvr-ripple-out">Ripple Out</a>  
<a href="#" class="button hvr-ripple-in">Ripple In</a>  
<a href="#" class="button hvr-outline-out">Outline Out</a>  
<a href="#" class="button hvr-outline-in">Outline In</a>  
<a href="#" class="button hvr-round-corners">Round Corners</a>  

Border Fade
Hollow
Trim
Ripple Out
Ripple In
Outline Out
Outline In
Round Corners

Shadow and Glow Transitions (better with button class)

<a href="#" class="button hvr-shadow">Shadow</a>  
<a href="#" class="button hvr-grow-shadow">Grow Shadow</a>  
<a href="#" class="button hvr-float-shadow">Float Shadow</a>  
<a href="#" class="button hvr-glow">Glow</a>  
<a href="#" class="button hvr-shadow-radial">Shadow Radial</a>  
<a href="#" class="button hvr-box-shadow-outset">Box Shadow Outset</a>  
<a href="#" class="button hvr-box-shadow-inset">Box Shadow Inset</a>  

Shadow
Grow Shadow
Float Shadow
Glow
Shadow Radial
Box Shadow Outset
Box Shadow Inset

Speech Bubbles (better with button class)

<a href="#" class="button hvr-bubble-top">Bubble Top</a>  
<a href="#" class="button hvr-bubble-right">Bubble Right</a>  
<a href="#" class="button hvr-bubble-bottom">Bubble Bottom</a>  
<a href="#" class="button hvr-bubble-left">Bubble Left</a>  
<a href="#" class="button hvr-bubble-float-top">Bubble Float Top</a>  
<a href="#" class="button hvr-bubble-float-right">Bubble Float Right</a>  
<a href="#" class="button hvr-bubble-float-bottom">Bubble Float Bottom</a>  
<a href="#" class="button hvr-bubble-float-left">Bubble Float Left</a>  

Bubble Top
Bubble Right
Bubble Bottom
Bubble Left
Bubble Float Top
Bubble Float Right
Bubble Float Bottom
Bubble Float Left

Curls (better with button class)

<a href="#" class="button hvr-curl-top-left">Curl Top Left</a>  
<a href="#" class="button hvr-curl-top-right">Curl Top Right</a>  
<a href="#" class="button hvr-curl-bottom-right">Curl Bottom Right</a>  
<a href="#" class="button hvr-curl-bottom-left">Curl Bottom Left</a>  

Curl Top Left
Curl Top Right
Curl Bottom Right
Curl Bottom Left

Working with <div> and <p> tag

Sweep to Right. We know it will be a long paragraph.
This new line indicates it is what will be happened.

Bounce to Right. We know it will be a long paragraph.
This new line indicates it is what will be happened.

Shutter in Vertical. We know it will be a long paragraph.
This new line indicates it is what will be happened.

Curl Bottom Left. We know it will be a long paragraph.
This new line indicates it is what will be happened.

Outline In. We know it will be a long paragraph.
This new line indicates it is what will be happened.

Float Shadow. We know it will be a long paragraph.
This new line indicates it is what will be happened.

## Graph CSS - [https://rbitr.github.io/ChartS.css/](https://rbitr.github.io/ChartS.css/) - advanced alternatives: [Charts.css](https://chartscss.org/) ``` ```
  • (15,12)
  • (0.25,6.78)
  • (-0.7,9)
  • (-4,-6)
    • Dogs: 20
    • Cats: 10
    • Lions: 30
    • Tigers: 15
    • Bears: 20
  • Animals: 95
  • Dogs : 20
  • Cats : 10
  • Lions : 30
  • Tigers : 15
  • Bears : 20