Skip to main content

Search

Items tagged with: Coding


Chinese Hackers Compromised 20K FortiGate Systems worldwide
#hackerspace #hacking #hackingtools #hackingtips #cybercrimen #coding #SnoopGod #SnoopGodLinux #Ubuntu https://cybersecuritynews.com/hackers-compromise-20k-fortigate-systems/


APT Hackers Abusing Google & OneDrive To Host Malicious Scripts
#hackerspace #hacking #hackingtools #hackingtips #cybercrimen #coding #SnoopGod #SnoopGodLinux #Ubuntu https://cybersecuritynews.com/apt-hackers-abusing-google-onedrive/


Here's a pure CSS char by char text reveal on scroll!

@codepen demo https://codepen.io/thebabydino/pen/MWPeLmp

No splitting text into individual characters!

Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 😱)

cc @bramus

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev


#tinySVGtip Better gooey effect with no matrix filter!

Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).

The assembly containing them gets an SVG filter as below.

Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG

#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment


We have a few years to prepare. We can’t have another #y2k situation.

#programming #coding


7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK

A simple #SVG filter trick.

We create the gradient text.

The filter creates a blurred copy of it and places it underneath.

We then animate the gradient stops... magic! 🪄✨

#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment


6⃣ 688 ❤️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv

A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091

#halftone #pattern #gradient #cssGradient #blendMode #blending #fliter #cssFilter #code #coding #frontend #web #webDev #dev #webDevelopment


5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qByGqOm

JS used only for
a) feature support detection
b) updating slider value in a --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment


4⃣ 736 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd

The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/

Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.

#3D #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment


3⃣ 747 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE

Behind demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#css #svg #code #coding #frontend #web #webDev #webDevelopment #dev


2⃣ 841 ❤️ neon hex https://codepen.io/thebabydino/pen/zGmdep

Most people know my CSS stuff, but this was my most hearted Pen for some three quarters of a decade... and it's a #canvas one! The JS feels dated nowadays, but oh, well... still my favourite out of this top 3.

#js #javascript #code #coding #frontend #web #dev #webDev #webDevelopment


I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:

1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv

My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!

#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev


8⃣ 496 ❤️ Pure #CSS 3D toggle with only input[type=checkbox] + label https://codepen.io/thebabydino/pen/ajpqYW

(awfully hacky, but cool-looking result... which nowadays I'd probably try to get with an SVG filter 🤔)

#3d #toggle #checkbox #css3D #code #coding #frontend #web #webDev #webDevelopment #dev


#tinySVGtip How do you create an *inset* shadow on an `img` element?

You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles & questions on StackOveflow on this very topic.

SVG filters to the rescue for an elegant solution!

✨ offset & blur image
✨ subtract it out of original image alpha ⇒ get black inner shadow
✨ paint it 🍊
✨ place it on top of img

#SVG #filter #inset #shadow #image #svgFilter #code #coding #frontend #webDev #webDevelopment