• Register
Welcome to Kodlogs Q&A, programming questions and answer website.

Most popular tags

java program python php javascript android c# r spring c mysql arrays python-3 tomcat ggplot2 numpy exception spring-boot jdbc eclipse ssl sockets string x html sql-server python-2 7 java-8 intellij-idea entity-framework macos pandas minecraft ios hibernate csv security json windows ssl-certificate heap-memory scikit-learn winforms illegalstateexception keytool matlab redirect code program junit pip maven ubuntu math facebook jquery cryptography sql asp list loop int net class https fatal-error struts java-applet runtime-error apache-spark pyspark garbage-collection sql-server-2005 for-loop quirks-mode internet-explorer-9 internet-explorer machine-learning keras indentation-error unit-testing android-studio jupyter-notebook virtualenv webclient visual-studio-2010 webpack compiler-errors numpy-ndarray curl vagrant aspnet dataframe nullpointerexception javafx jsp django jpa docker wordpress servlet indentation xcode typeerror scanner sum deployment socketexception git linux loops css util oracle cmd recursion search tcp syntax connection float datetime httpwebrequest main function number import file html5 elasticsearch-5 elasticsearch app-transport-security ios10 ios9 cdn cloudflare wampserver plpgsql salt-stack sysv parent-child android-edittext textview visual-studio-2012 android-workmanager unique-index tsql unity2d unity3d electron theano maven-compiler-plugin pickle assetbundle rstudio bar-chart python-tesseract tomcat6 primefaces solr easymock jvm-crash tomcat7 apache-httpclient-4 web-services woodstox discord jersey-2 prepared-statement resultset sencha-cmd sencha-touch-2 sencha-touch powermock fips apex x509certificate ibm-bpm websphere-7 file-permissions file-io accesscontrolexception grizzly atmosphere slick2d lwjgl informetica twitter-bootstrap-3 jax-rs resteasy spring-mvc spring-security-kerberos spring-security kerberos long-integer mapnik pytorch git-review vpython continuation homebrew xgboost conda visual-studio android-asynctask stack-trace user-interface jaxws-maven-plugin maven-3 maven-2 browser-notsupportedexception google-maps-api-3 google-maps visual-studio-code truststore firebase-authentication aws-organizations amazon-web-services php-7 string-formatting cplusplus visual-studio-2015 net-core net-mvc msbuild extension-methods foreign-keys windows-services react-redux reactjs inputstream facebook-graph-api entity-framework-4 reportingservices-2005 reporting-services mips linear-regression anova deep-learning block-device melt reshape2 floating-point webpack-dev-server javascrip 0-lollipop android-5 statsmodels avx eclipseide javafx-2 php-not-recognized laravel command-line tinyurl classnotfoundexception atom-editor android-emulator android-sdk-tools ionic2 cordova foobar2k tcplistener net-2 net-4 ole-db-provider export-to-excel openrowset windows-10 vagrantfile glmnet jvm-arguments global-variables orm classformatexception eof upstart qt ipv4 graphviz pydot atom curses unityeditor pandoc tesseract xls oledb redux spotify cxf wamp nio stacked prediction headless hyperlink outlook jackson keystore applicationcontext pipeline iis jstl encryption perfect-square objective-c carthage xcode8 indexing standard-deviation sudo xampp postgresql connector apple mdf kubernetes destructor gettime arithmeticexception gmail ioexception heuristics milliseconds reporting disk cpu npm modx-revolution goldsky modx prevnext javascript-dictionary stack-smashing device-monitor radio-button android-actionbaractivity android-activity android-fragments java-long unqualified-id ora-12154 javc c++ java nullpointerexception runtime-error drjava awt-eventqueue dsx math-pow ajquery nosuchelementexception appcompatactivity jsf jtextfield awt jpanel inputmismatchexception glassfish deque jupyter flask lvalue tensorflow gradle servlets netbeans simulation ibm factorial javax apache boot opengl virtualbox jvm margins 2147483647 mongodb cloud firebase plot plugins github processor automation crash card certificate pointers concatenation formatting debugging devices module testing color arraylist node sequence date caching expected build response ip directory algorithms release collections print figure casting url expression integer microsoft sorting sort read types replace js rest ajax exe excel dictionary message required database text variable time size dll system files table runtime static random code web map http error version 0 2
0 votes
17 views
CSS 3D Text Effect in 3 Minutes!?
by (140 points)  
reshown by

3 Answers

0 votes

How to create an animated 3d cube hover effect using just CSS transform effect?

 

To  create a wrapper div which define the size and position of the cube inside let’s create a cube div with another two divs inside for the top and front cover so that's it for the HTML part. Let's work on the CSS let's define width height and position of our cube. I'm setting top and left to 50% and position to absolute to make the cube stays on the centre. I'm also going to add a box shadow to create a 3D look you can use any online CSS shadow generator to help with your setting now you see that the top left of the cube is, on the centre which is technically correct since it's the position reference point.

 

So I'm going to add a minus 50% transform to offset that and really Centre the cue ,now I'm going to set width and height of all divs except the wrapper to 100% and also assign an image background to the front and top of the cube the top and the front divs will look like this for now. Next I'm going to set the top and left properties of each div to zero and move it backward using transform and then rotate the top side of the cube for 90 degrees.  We need to set the transform origin to bottom as we want to use the bottom as a rotation point now we don't see the topside anymore since it has been rotated and finally add hover effect to the wrapper to rotate the cube counter clockwise by 90 degrees and set the transform style to preserve 3d and transition time for a half second ease in .Our for all divs it's important to also move the cube back by 50% when rotating or it will look like this .

by (8.9k points)  
0 votes

creating a 3d text effect in CSS:

The text effect we'll be trying to achieve is the 2d text effect has been created using the text shadow property so let's go to html5 and start working on it. You're in my HTML file I have the span tag with the class of text and  this is my name wrapped inside the span tags so this is all we need for the HTML part now let's go to a stiles dot CSS file I’ve already added a few style starting with the body where I've given it a background colour of C 4 C 4 C 4 which is a shade of gray the next thing I've done is I've positioned the text at the centre of the screen and now let's move ahead I'll set this text to upper case by saying text transform upper case I'll set the font family to word Anna which happens to be one of my favourite font families I'll increase the font size to 2 L am I'll set the font weight to 700 and I'll give it a colour of f5f5f5 now let's move to the most important part the text shadow property which is in fact going to give this text or 3d effect so we'll be adding multiple layers of text shadow so let's get started I'll say text shadow and the first value is going to be the horizontal offset which I'm going to set to one pixel the next is going to be the vertical offset which is again going to be one pixel and the blur which is going to be one pixel and the  colour I'm going to choose is nine one nine one nine one which is a shade of gray again I'll add another layer of texture oh this time again it's going to be one pixel of horizontal offset but the vertical offset I'll increase it to two pixel and the blur radius I'll keep it to one pixel and again the  colour is going to be nine one nine one nine one so instead of writing this multiple times I'll just copy this values and I'll paste it a few more times however the only thing I'm going to change here is the vertical offset so in this case I'll increase it to three this becomes 4 this becomes 5 6 7 8 so let's add a few more layers this becomes 9 and this becomes 10 so let's see what we have right now so your our text shadow is in fact taking shape and we are quite close to getting the 3d effect but we are not done yet there's one final thing we need to do let's go to our index dot final file and you're in the browser have a look at the bottom of the text let me zoom in the browser so that you can see clearly now here at the bottom of the text you can see some gap between the background and the text which in fact gives this text a 3d effect so let's see how we can achieve that we'll go to a stylist or CSS file let me reset the browser now in order to achieve the final effect I'll add in a few more text shadow layers but this time I'm going to use the RGB a  colour values so let me set the horizontal offset to one pixel the vertical officer is going to be 18 pixel the blur radius is going to be 6 pixel and the RGB a value is going to be 16 for the red 16 for green 16 for blue and the Alpha channel is going to be 0.4 now let me copy this and paste it three more times I'll indent this here I'm going to change the vertical offset to 22 pixel in this case I'm going to increase the vertical offset to 25 and here I'm going to increase it to 13 similarly we'll also change the blur radius in this case I'll increase it to 10 here I'll make it 35 and finally this is going to be 60 and the last thing we need to do is we need to change the alpha channel to 0.2 for the second layer and 0.2 for the third layer and finally let's see what we have achieved we now have the 3d text effect we were trying to achieve so this is easier .

by (8.9k points)  
0 votes

CSS 3D text hover:

Let’s start with adding radial gradient into our background. When working on things like this it's much easier to use online generator tools like this one for the text I'm going to create a span and assign class to it now the CSS first i will transform the text to uppercase and increase the font size and set the text colour if you also want to change the font family here’s the place and next I'm going to move the text to the centre by setting 50% table and left and minus 50% translates the next step we are going to do is to add two sets of layers of text shadow to simulate a 3D effect. The first set of layers is going to simulate a depth of the text I'm going to set the x-offset and blur radius to zero and set y-offset to one pixel. For a colour I'm going to edit it in RGB mode that's because when we add an extra layer we are going to increase the y-offset and decrease the RGB value to make the colour darker and the second set of layers is going to be the shadow of the text so we are going to use black colour we'll be doing it the same way as the first set except adding the blur radius and using less layers this time and now we have the base 3d effect the next step is to add a hover effect using CSS pseudo class we use the same text shadow as above and add a few more layers to the first set and increase the shadow offset of the second set also add a little translate and a transition to make a text appears to be moving and finally set the cursor to pointer for aesthetic purpose okay we are ready let's see the result .

by (8.9k points)  
...