Posts

Showing posts with the label CSS

Bouncing Text Animation Effect using Pure CSS

Image
This is a simple tutorial for creating bouncing text animation effect using pure CSS3 and HTML. In this tutorial, I have used CSS3 animation property with value ease to move text ( keyframe ) towards top and bottom ( alternate -- distance -10px ) at 1 second rate infinitely ( infinite ). Source Code HTML: index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bouncing Text Animation Effect</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="title_wrapper"> <div id="text"> <i>B</i><i>o</i><i>u</i><i>n</i><i>c</i><i>i</i><i>n</i><i>g...

NCBI BLAST Graphical Summary using HTML/CSS

Image
This is a simple tutorial for designing a webpage for displaying the graphical summary of biological sequence alignment similar to the output of the NCBI BLAST+ program using HTML and CSS languages. In this tutorial, I have given few example hits (in bars) that match all range of bit scores (mentioned by color key). NCBI BLAST Graphical Summary NCBI BLAST is a most popular bioinformatics framework for finding local similarity between two or more biological sequences. It addresses a fundamental problem in bioinformatics research. The heuristic algorithm it uses is much faster than other approaches, such as calculating an optimal alignment. This emphasis on speed is vital to making the algorithm practical on the huge genome databases currently available, although subsequent algorithms can be even faster. In NCBI BLAST, the graphic is an overview of the database sequences aligned to the query sequence. These are represented horizontal bars colored coded by score and showing the ex...