ocean graphics

name: bubble text

author: powys

upload: 6.12.2021

name:

author: teaclub.crd.co

upload: 12.22.2020

name: text with border

author: ?

upload: n/a

name: text with border (2)

author: ?

upload: n/a

name: triple outline

author: lolcow

upload: 2021

name:animated underline

author: ?

upload: n/a

name: pulsing text

author: ukamori

upload: 7.13.2022

name: sideways bounce text

author: ukamori

upload: 6.30.2022

name: text float on hover

author: ?

upload: 6.14.2022

name: bouncy text

author: teenagegoths

upload: 9.5.2021

name:floating text

author: ?

upload: n/a

name:image glow/glow border

author: kyujouz

upload: 7.2.2021

name:tooltip on img hover

author:?

upload: n/a

name:hello kitty mask

author:jongidea

upload: 7.12.2022

name:neon pink ribbon border

author:?

upload: n/a

name:cherry music player

author: milkandcookies

upload: 9.5.2021

name:glowing sticker border

author:vickkuma

upload:n/a

name:disable left click

author:maximus

upload:n/a

name:blur menu

author:jakeandamir

upload:8.19.2021

name:blur menu (rotate)

author:jakeandamir

upload:8.19.2021

name:gradient text

author:jakeandamir

upload:n/a

name:pop image

author:barok/?

upload:n/a

name:batch of masks (1)

author:?

upload:n/a

name:batch of masks (2)

author:?

upload:n/a

name:gigi's gold frame

author:nbsaki

upload:n/a

name: bubbles

author: ukamori

upload: 7.10.2022

name: rainbow text

author: matt hedgecoe

upload: 8.19.2021

code

code

code

<p><a class="link" href="#"><span data-content="link 1">link 1</span></a>
  
                            <a class="link" href="#"><span class="dashed" data-content="link 2">link 2</span></a>
                            
                            <a class="link" href="#"><span class="wavy" data-content="link 3">link 3</span></a>
                        
                        
                    
                        <style>
                            box-sizing: border-box;
                            }
                            *::before, *::after {
                            box-sizing: border-box;
                            }
                            @media (min-width: 48rem) {
                            }
                            #container {
                            margin: auto;
                            padding: 0 1rem;
                            max-width: 48rem;
                            width: 100%;
                            }
                            a {
                            text-decoration: none;
                            color: black;
                            cursor: pointer;
                            }
                            .link {
                            position: relative;
                            transition: clip-path 275ms ease;
                            }
                            .link:hover span::before, .link:focus span::before {
                            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                            }
                            .link span {
                            position: relative;
                            display: inline-block;
                            }
                            .link span::before {
                            position: absolute;
                            content: attr(data-content);
                            text-decoration: underline;
                            clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
                            transition: clip-path 275ms ease;
                            }
                            span.dashed::before {
                            text-decoration-style: dashed;
                            }
                            span.wavy::before {
                            text-decoration-style: wavy;
                            }
                            </style>

code

code

code

<Style>.bouncyyy { font-size:4em; z-index: 99; animation: bounce 2s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto; ;}

.letterone { animation-delay:0s; display:inline-block;}
                            .lettertwo { animation-delay:0.2s; display:inline-block;}
                            .letterthree { animation-delay:0.4s; display:inline-block; }
                            .letterfour { animation-delay:0.6s; display:inline-block;}
                            .letterfive { animation-delay:0.8s; display:inline-block;}
                            .lettersix { animation-delay:1s; display:inline-block;}
                            .letterseven { animation-delay:1.2s; display:inline-block;}
                            
                            @keyframes bounce { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-30px); } 50% { transform: scale(1.05,.95) translateY(0); } 60% { transform: scale(1,1) translateY(-4px); } 100% { transform: scale(1,1) translateY(0); } }</style>
                            
                            <p class="bouncyyy letterone">A</p><p class="bouncyyy lettertwo">L</p><p class="bouncyyy letterthree">L</p><p class="bouncyyy letterfour">I</p><p class="bouncyyy letterfive">S</p><p class="bouncyyy lettersix">O</p><p class="bouncyyy letterseven">N</p>

code

code

<head>
                        <style>
                        #s-m-t-tooltip{
                            /* basic */
                            max-width: 300px;
                            z-index: 10;
                            margin: 24px 14px 7px 12px;
                            /* style and design */
                            padding:8px;
                            -moz-border-radius:3px;
                            -webkit-border-radius:3px;
                            border-radius:3px;
                            background: black;
                            color: white;
                        }
                        </style>
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
                        <script src="https://static.tumblr.com/lspzyz3/xloqk6cgp/jquery.style-my-tooltips.js"></script>
                        <script>
                                                    (function($){
                                                    $(document).ready(function(){
                                                    $("[title]").style_my_tooltips({
                                                    tip_follows_cursor: true,
                                                    tip_delay_time:100,
                                                    tip_fade_speed:300,
                                                    attribute:"title"
                                                    });
                                                    });
                                                    })(jQuery);
                        </script>
                        </head>
                        <a href="#" data-toggle="tooltip" title="wow! a tooltip" class=""><img src="https://i.pinimg.com/736x/58/f5/65/58f565451df7821bb519cf37cc25d6f0.jpg"></a>

code

<!---

(＼ ∧♛∧          .+° °*.  
                            (ヾ( *･ω･)        °・  cr jongidea if used !
                            `し(   つ つ━✩*  .+°
                            (／しーＪ
                            
                            --->
                            
                            
                            <style> 
                            /*my credits! please dont remove, but you may the change the img to ur liking*/
                            .dont-remove {
                            position:fixed;
                            z-index:99;
                            bottom:0;margin-bottom:5px;
                            left:0;margin-left:5px;
                            }
                            
                            .kitty {
                            -webkit-mask-image: url(https://dl.dropbox.com/s/twerr59ki69ycwh/image-removebg-preview.png);
                            -webkit-mask-size: 100%;
                            -webkit-mask-repeat: no-repeat;
                            -webkit-mask-position: center;
                            }
                            
                            </style>
                            <a href="https://twitter.com/jongidea" title="hello kitty mask created by gael!"><img class="dont-remove" src="https://64.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif"></a> 
                            
                            <img class="kitty"  src="https://cdn.discordapp.com/attachments/904308736712138793/992697366983491634/original.gif">

code

code

code

code

<style>

figure.blurfilter{
                                    margin: 0;
                                    padding: 0;
                                    display: inline-block;
                                    position: relative;
                                    overflow: hidden; /
                                }
                                
                                .figcaption img {
                                width: 10px;
                                }
                                
                                figure.blurfilter img{
                                    display: inline-block;
                                    width: 250px;
                                    height: auto;
                                    transition: all 0.4s 0.4s;
                                }
                                
                                figure.blurfilter figcaption{
                                    position: absolute;
                                    display: block;
                                    text-align: left;
                                  -webkit-box-sizing: border-box;
                                  -moz-box-sizing: border-box;
                                  box-sizing: border-box;
                                    text-align: center;
                                    background: white;
                                    padding: 10px;
                                    z-index: 100;
                                    width: 90%;
                                    height: 90%;
                                    overflow: auto;
                                    top: 5%;
                                    left: 5%;
                                  font-family: Arial;
                                    font-size: 16px;
                                    opacity: 0;
                                    -moz-transition: all 0.4s;
                                    -webkit-transition: all 0.4s;
                                    transition: all .4s;
                                }
                                
                                
                                figure.blurfilter figcaption h3{
                                    border-bottom: 1px solid red;
                                    text-align: left;
                                    width: 90%;
                                    margin: 0;
                                }
                                
                                figure.blurfilter figcaption p{
                                    text-align: left;
                                    margin-top: 10px;
                                    line-height: 1.5;
                                }
                                
                                figure.blurfilter figcaption a{
                                    text-decoration: none;
                                }
                                
                                figure.blurfilter:hover img{
                                  -webkit-filter: blur(5px);
                                  filter: blur(5px);
                                    -webkit-transform: scale(1.3);
                                    transform: scale(1.3);
                                    -moz-transition: all 0.4s;
                                    -webkit-transition: all 0.4s;
                                    transition: all 0.4s;
                                }
                                
                                figure.blurfilter:hover figcaption{
                                    opacity: 1;
                                    -moz-transition: all .4s .4s;
                                    -webkit-transition: all .4s .4s;
                                    transition: all .4s .4s;
                                }
                                
                                
                                figure.blurrotate figcaption{
                                    -webkit-transform: rotate(10deg);
                                    transform: rotate(10deg);
                                }
                                
                                figure.blurrotate:hover figcaption{
                                    -webkit-transform: rotate(0);
                                    transform: rotate(0);
                                }
                                
                                .pixel {
                                width: 1em !important;
                                filter: none !important;
                                display: inline-block;
                                }
                                figcaption {
                                overflow-y: scroll;
                                }
                                </style>
                                <figure class="blurfilter blurrotate">
                                    <img src="https://i.pinimg.com/736x/d2/ab/57/d2ab57731674ebe90beddc65d8fd8f99.jpg" >	
                                    <figcaption>
                                        Insert the contents of the box here. Adding images here is a little bit tricky because you have to create a special class to size the image and make sure it doesn't blur with the background image on hover. See ".pixel" above and how the image next is tagged "class='pixel'". In order to give an image a class, just add class="classname" add the end of the tag before the brackets cut off. THe class name here is "pixel". Here's a pixel. <img src="https://gnome.crd.co/assets/images/people/25a5305f.gif?v=bc6557bf" class="pixel">
                                    </figcaption>
                                </figure>

code

code

code

code

code

code

/*
                            RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
                            Featured on JavaScript Kit
                            For this script, visit http://www.javascriptkit.com
                            */
                            
                            // ********** MAKE YOUR CHANGES HERE
                            
                            var text="RAINBOW TEXT" // YOUR TEXT
                            var speed=80 // SPEED OF FADE
                            
                            // ********** LEAVE THE NEXT BIT ALONE!
                            
                            
                            if (document.all||document.getElementById){
                            document.write('<span id="highlight">' + text + '</span>')
                            var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
                            }
                            else
                            document.write(text)
                            var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
                            var r=1
                            var g=1
                            var b=1
                            var seq=1
                            function changetext(){
                            rainbow="#"+hex[r]+hex[g]+hex[b]
                            storetext.style.color=rainbow
                            }
                            function change(){
                            if (seq==6){
                            b--
                            if (b==0)
                            seq=1
                            }
                            if (seq==5){
                            r++
                            if (r==12)
                            seq=6
                            }
                            if (seq==4){
                            g--
                            if (g==0)
                            seq=5
                            }
                            if (seq==3){
                            b++
                            if (b==12)
                            seq=4
                            }
                            if (seq==2){
                            r--
                            if (r==0)
                            seq=3
                            }
                            if (seq==1){
                            g++
                            if (g==12)
                            seq=2
                            }
                            changetext()
                            }
                            function starteffect(){
                            if (document.all||document.getElementById)
                            flash=setInterval("change()",speed)
                            }
                            starteffect()
                            </script>