All of my themes are free. All of you can do is leave the credit intact and read TOU for more information!
I'm trying to help you if you have a problem regarding my themes. Don't be hesitant to ask me something! I am here to help you.
All themes are customizable! Feel free to edit as your wish! And make sure to check the options before asking a question!
Fukuo Themes
インドネシアの想像力

Circle Hover Menu by Fukuo

In this tutorial, we’ll be making a Circle Hover Menu. I have used it on my personal blog—but, unfortunately, I closed it as I am not active on that blog lately. I’ve been spending my time to code this one, there are many various style on the code so I hope you can find what you like!

Please note that this might not be supported in all browsers, this is still experimental. No previews are provided for the code, I will try to add it later.

Read More →
93

 Pages [#2] — Portfolio [2]   by Fukuo

Live preview and codes

Hmm, I have some ideas to make a simple page like this so I decided to release it. This page is a portfolio page—you can use this as an anime recommendation page but this looks so simple, I’ll make an anime recommendation page if I have time! If you have any questions or suggestion, please don’t be hesitant to drop me a message!

NOTE: The image size is 230px by 345px and I recommend you to keep the name of box short or it will look weird.

CREDIT: 

  • Illustration are made by me
  • Style-my-tool-tips by malihu
  • Multi-colored topbar by Excolo

Please, like or reblog if you use or plan to use it! Thank you!

260

risarodil:

Sharing some tips and techniques I learned from months of exploring Typography. 

(via animeps)

Pages [#1] — Rectangle [1]  by Fukuo

Live preview and codes

Wow! I haven’t made any pages for a while—I know, my pages are so obsolete and ugly. I need to at least release this page in one-page or it is known as all-in-one pages, the idea comes from ninpen whose themes and pages are amazing, I highly recommend you to visit her theme blog!

NOTE: You need to have a knowledge with HTML/CSS, I am not helping with customization.

CREDIT: 

  • Dot Navigation Style by Codrops
  • Inspiration: ninpen
  • Style-my-tool-tips by Malihu
  • Icons: source needed! But, I mostly get it from my art blog

Please like or reblog if you use this pages or plan to use. Thank you!

316

Theme [#38] — Tetsuya - 黒子 テツヤ by Fukuo

Live preview and codes: HERE

A theme inspired by Kuroko no Basuke, ah I really like this anime; If you want to know, this theme is actually made for psycho-pass theme but I’ve decided to change it. This theme has a lot of options—not too much yet confusing if you can’t handle the provided options I gave to you. This theme has two options for links: pop up links or sliding menu barPlease be sure to check only one options. And lastly, if you scroll down, the content will be showing the animation! You can turn this option off if you don’t like it!

CREDIT:

Please, Like or Reblog if you want/or plan to use this theme. Thank you very much!

382
Sliding Menu Bar by Fukuo

Live Preview

Recently, I’ve been experimenting the code on how to make a menu bar with new transition and after a few hours experimenting the code and transition, I’ve decided to share what I’ve been working on with you. If you find a bugs, please contact me so I can fix it.
Please note that this might not be supported in all browsers, this is still experimental
Before we continue to the markup, I’m assuming you that you have understand the basic of HTML and CSS and know how to use it, just adjust the menu with your desired size, I am not helping with the customization.

HTML: Put the code under <body> tags:
<div id="main_holder_menu">
     <div class="title_menu">         <!-- You can change the 'menu' with your own words -->            MENU    </div>
        <div class="one_delay"><a class="holder_menu" href="#">Home</a></div>
        <div class="two_delay"><a class="holder_menu" href="#">Archive</a></div>
        <div class="three_delay"><a class="holder_menu" href="#">Contact</a></div>
        <div class="four_delay"><a class="holder_menu" href="#">Links</a></div>
</div>

CSS: After putting the code above, put this code between <style type=”text/css”> and </style> tags:
#main_holder_menu {   /* EDIT: Add position:fixed; and right:30px and top:30px;, then delete margin:100px auto auto 730px; */
    width:220px;
    height:70px;
    overflow:hidden;
    margin:100px auto auto 730px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

#main_holder_menu:hover {
    height:400px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.title_menu {
    height:70px;
    text-align:center;
    padding:0px 10px 15px 10px 10px;
    background-color:rgba(255,255,255,0.5);
    font-family: 'Rationale', sans-serif;
    font-size:44px;
    text-shadow:2px 1px 0px #fff;
}

.holder_menu {
    width:200px;
    display:block;
    color:white; /* The color of menu */
    text-align:center;
    font-family: 'Rationale', sans-serif;
    font-size:29px;
    background-color:rgba(0,0,0,0.2); /* The background of menu */
    margin-bottom:10px;
    padding:10px 10px 15px 10px;
}

#main_holder_menu:hover .one_delay {
   margin-left:0px;
   transition-delay:0.2s;
   -webkit-transition-delay:0.2s;
}

.one_delay {
   margin-left:220px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#main_holder_menu:hover .two_delay {
   margin-left:0px;
   transition-delay:0.5s;
   -webkit-transition-delay:0.5s;
}

.two_delay {
    margin-left:-220px;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#main_holder_menu:hover .three_delay {
   margin-left:0px;
   transition-delay:0.8s;
   -webkit-transition-delay:0.8s;
}

.three_delay {
    margin-left:220px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
     transition: all 0.5s ease;
}

#main_holder_menu:hover .four_delay {
   margin-left:1px;
   transition-delay:1s;
   -webkit-transition-delay:1s;
}

.four_delay {
    margin-left:-220px;
    -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
We haven’t finished yet! Since, I am using the font from Google Webfonts, we need to include the provided code below:
<link href='http://fonts.googleapis.com/css?family=Rationale' rel='stylesheet' type='text/css'>
That’s all to it, I hope this is useful, if you have a question; just send me a shot! Any form of Credit, Like or Reblog are appreciated!

Sliding Menu Bar by Fukuo

Live Preview

Recently, I’ve been experimenting the code on how to make a menu bar with new transition and after a few hours experimenting the code and transition, I’ve decided to share what I’ve been working on with you. If you find a bugs, please contact me so I can fix it.

Please note that this might not be supported in all browsers, this is still experimental

Before we continue to the markup, I’m assuming you that you have understand the basic of HTML and CSS and know how to use it, just adjust the menu with your desired size, I am not helping with the customization.

Read More →
462

+ download
+ size: 500x500
+ you can change the time delay if you want
+ don’t mess with the shapes; it will ruin the entire animation
+ please like or reblog if using
inspiration

(Source: tomfclton, via itsphotoshop)

page 1 of 180
NEXT