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
インドネシアの想像力

Menu Dropdown by Fukuo

Live Preview

Hello, there! I am back with a new tutorials—it’s a menu dropdown. I am so happy to share the code I’ve been working on. Be sure to play around with the code and please note that I am not helping with customization nor do I will help you to use this code, you need to have a knowledge with HTML and CSS.
Please note that this might not be supported in all browsers, this is still experimental.
[[MORE]]
I assume you that you at least have a knowledge with HTML and CSS so that you can use this on your blog or websites. The first step we should do is getting started with the markup.
HTML: Creating a navigation bar
We start with the markup. This is the easiest part—just paste the code under <body> tags. Make sure to replace the ‘# (hastags)’ with the URL you want to add to and change the ‘link’ with the name you want.
    <div id="menu-dropdown">
        <span>Menu</span>
            <div class="menubar-drop">
                <!-- These are the links, you can add it as many as possible! Make sure to edit the height of the .menubar-drop and #menu-dropdown or it will looks weird. -->
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
            </div>
        </div>
CSS: Styling the navigation bar
Yes, this is the fun part, styling the navigation bar! Paste the code under <style type="text/css"> But, before looking at the code, we’ll be breaking it up and looking at a few of code which are important:
    /* MENU DROPDOWN by FUKUO */
	#menu-dropdown {
		width:250px; /* This is the width of the content .. */
		height:30px; /* Height of the content .. */
		padding:20px; /* Padding .. */
		overflow: hidden;
		margin:150px auto auto 250px; /* YOU HAVE TO CHANGE THIS, CHANGE IT BASED ON THE CONTENT YOU MAKE. */
		-webkit-transition: all 0.7s ease;
		-moz-transition: all 0.7s ease;
		-o-transition: all 0.7s ease;
	}

	#menu-dropdown:hover {
		height:300px; /* The height on hover, it's transparent so you can not see it */
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
	}
As shown above, the width of menu dropdown is 250 on pixels—you can change it with your desired size, but please remember that it depends on the content you have; i.e if you have a sidebar with 250 pixels in width you need to change the size—or padding—on the code and play around with it, just don’t change the height of menu dropdown! It will makes the code messy!
    #menu-dropdown span {
        cursor: help; /* Cursor .. */
		margin:-10px 0 0 -10px;
		display:block;
		width:250px; /* This is same as shown above */
		height:30px;
		background-color:#111; /* Background */
		height:30px;
		padding:12px;
		color:white; /* Color .. */
		font-family:courier new; /* Font.. */
		text-transform: uppercase; /* Text on uppercase .. */
		font-size:25px; /* Font size .. */
		text-align:left;
		-moz-border-radius:10px;
		border-radius:10px;
		-o-border-radius:10px;
		-webkit-border-radius:10px;
	}
This is the important things you should know, this is the content where the text and the background of nav dropdown appears! The code is self-explanatory, you can see the caption or instructions next to the declaration there.
	#menu-dropdown:after {
		content:'';
		position:absolute;
		margin:-310px 0 0 220px; /* Triangle's position before hovered */
		width:0;
		height:0;
		border-top:15px solid transparent;
		border-left:15px solid #fff; /* Background of triangle*/
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
	}
	
#menu-dropdown:hover:after {
        z-index:-1; /* This is needed */
		border-top:30px solid transparent;
		border-left:30px solid #fff; /* Background of triangle */
		margin:-240px 0 0 140px; /* This is the triangle's position when hovered */
		-webkit-transform:rotate(135deg);
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
	}
The code above is triangle, it will goes down when hovered—just take a look at the photoset—I highly recommend you to play around with this code.
    .menubar-drop {
		background-color:#fff; /* It's the background of the content that contains a links */
		width:250px; /* Yes, the width of the content */
		height:200px;
		color:white; /* Color .. */
		font-family:courier new;
		text-transform: uppercase;
		font-size:13px;
		text-align:left;
		padding:3% 1% 9% 3%; /* Padding ... */
		margin:40px 0 0 -5px;
		border-radius:10px;
		-moz-border-radius:10px;
		-o-border-radius:10px;
	}

	.menubar-drop a {
		display:block;
		font-size:20px;
		margin-bottom:10px;
		width:220px;
		padding:12px 12px 12px 12px;
		background-color:#222; /* Background.. */
		text-decoration:none;
		color:white; /* Color .. */
		 border-radius:10px;
		-moz-border-radius:10px;
		-o-border-radius:10px;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
	}

	.menubar-drop a:hover {
		letter-spacing:5px;
		text-indent:80px;
		background-color:#333;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
	}
	
We’re almost done! This code is the links itself, you can edit this with your liking! I have put some instructions there just in case you’re confused to change the colors.
Conclusion
That’s all to it! I hope you can find it useful. Any Reblog, Like and Credit are really appreciated! 

Menu Dropdown by Fukuo

Live Preview

Hello, there! I am back with a new tutorials—it’s a menu dropdown. I am so happy to share the code I’ve been working on. Be sure to play around with the code and please note that I am not helping with customization nor do I will help you to use this code, you need to have a knowledge with HTML and CSS.

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

Read More →
55

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 →
262

 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!

271

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!

367

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!

399
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 →
465
page 1 of 180
NEXT