Alverta  Crist

Alverta Crist

1610114333

How to Create Glassmorphism Effects Login Form with HTML & CSS

Glassmorphism Effects Login Form HTML CSS | Glass Morphism UI Design CSS | Login Form UI Design CSS

Glassmorphism Login Form is currently gaining much popularity for this beauty. CSS Glassmorphism is a UI design that is basically like a transparent design. 

However, in this case, the background is semi-transparent and slightly blurred. You will see different types of websites and applications using this type of design. Currently, Apple, Windows, and many other websites use this type of design. 

In this article, I am going to show you how to create Glassmorphism Login Form using HTML and CSS code.

Glassmorphism Login Form in HTML & CSS (2021)

Earlier I showed how to create different types of elements of Neumorphism design. As you can see in the picture above, the webpage has a complete structure similar to the normal login form

However, in this case, the elements of the background are seen a bit, that is, a bit like a transparent design. However, some amount of blur has been used in the background so that the different types of text or color in the background can be seen vaguely.

How to make Glassmorphism Login Form design?

You can convert any simple design to a Glassmorphism design. For this, you need to change a little bit of code. First use background-color semi-transparent such as rgba (255,255,255,0.13).

Secondly, you need to use backdrop-filter: blur (10px) to blur the background a bit. In the end, you need to use a border to enhance its beauty. By changing these three codes you can convert any simple design to CSS Glassmorphism design.

Below I have given a live demo that will help you to know how this GlassMorphism Effects Login Form works.

 If you want to create Glassmorphism Login Form using HTML and CSS code then follow the tutorial below. 

Glassmorphism Login Form using HTML and CSS

In this tutorial below I have shown how to make this design. Before sharing this tutorial, let me say something about this design.

It is built just like a normal login form as you saw in the demo above. Two colorful circles have been created on everyone's first web page. I have made the structure of this login form on it. A heading has been used for the first time in the login form. Then two boxes were made to input the email ID and password. There is a nice login button for logging in and there are two social media buttons at the end of it all.

As I said earlier, in the case of glass morphism UI design, the background is somewhat semi-transparent.

Step 1: Design the web page

I designed the web page using a small amount of CSS code below. Here I have used black as the background color of the web page. 

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #080710;
}
Design the web page

Step 2: Create two colorful circles in the background

I have created two colorful circles on that page using the following HTML and CSS code. Although these two circles are not part of the design, I have created these two circles to design the background. However, in this case, you can use any other image.

This circle is 200 px in width and height and a 50% border radius has been used to make it completely round. position: made absolute so that it stays in the same place.

<div class="background">
   <div class="shape"></div>
   <div class="shape"></div>
</div>
.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}

Using the CSS codes below, I designed the two separately and used different colors. I used a blue gradient in the background of the first sphere. In the case of the second circle, I have used the gradient color of red.

.shape:first-child{
    background: linear-gradient(
        #1845ad,
        #23a2f6
    );
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -30px;
    bottom: -80px;
}
Create two colorful circles in the background

Step 3: Create the basic structure of the Glassmorphism Login Form

We have created the basic structure of this login form using the following HTML and CSS code. This GlassMorphism Effects Login Form has a width of 400px and a height of 520px. 

I have used background-color semi-transparent here. Border-radius: 10px has been used to make the four somewhat round. If you watch the demo, you will understand that the colors in the background of this login form are a bit blurry. For this backdrop-filter: blur (10px) has been used.

 <form>
 
 </form>
 
form{
    height: 520px;
    width: 400px;
    background-color: rgba(255,255,255,0.13);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
}

form *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
Create the basic structure of Glassmorphism Login Form

Step 4: Add headings to the form

Now using these codes I have created a heading in the form. I have used font-size: 32px to increase the text size of that heading and text-align: center has been used to keep the text in the middle.

 <h3>Login Here</h3>
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}
Add headings to the form

Step 5: Create input place to input

Using the codes below, I've created a place to input email IDs and passwords. For this, I have used the input function of HTML. I used 50px height of input space and used background-color semi-transparent.

 <label for="username">Username</label>
   <input type="text" placeholder="Email or Phone" id="username">

 <label for="password">Password</label>
   <input type="password" placeholder="Password" id="password">
label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #e5e5e5;
}
Create input place to input

Step 6: Add the login button to the Glassmorphism Login Form

Now I have created a login button in the Glassmorphism Login Form. There is no specific size for this login button. I have used padding to give this size. The background color of this button is completely white and the font-size: 18px is used.

 <button>Log In</button>
button{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
Add the login button to the Glassmorphism Login Form

Step 7: Create two social buttons

I have created two social media buttons at the end of it all. The two buttons are 150px in length and the background color is semi-transparent. Here I used the icon which I used the CDN link of font-awesome to activate.

 <div class="social">
   <div class="go"><i class="fab fa-google"></i>  Google</div>
   <div class="fb"><i class="fab fa-facebook"></i>  Facebook</div>
 </div>
.social{
  margin-top: 30px;
  display: flex;
}
.social div{
  width: 150px;
  border-radius: 3px;
  padding: 5px 10px 10px 5px;
  background-color: rgba(255,255,255,0.27);
  color: #eaf0fb;
  text-align: center;
}
.social div:hover{
  background-color: rgba(255,255,255,0.47);
}
.social .fb{
  margin-left: 25px;
}
.social i{
  margin-right: 4px;
}
Glassmorphism Login Form using HTML and CSS

I hope you have learned from this tutorial how I created this Glassmorphism Login Form design with the help of HTML and CSS. 

source code :
https://github.com/animationbro/glass-morphism-login-form-css.git

#html #css #webdevelopment #programming #developer

What is GEEK

Buddha Community

How to Create Glassmorphism Effects Login Form with HTML & CSS
Easter  Deckow

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

  1. The built-in interactive_console.py tool (if you already have a consumer key & secret)
  2. The Tumblr API console at https://api.tumblr.com/console
  3. Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

  • state - a string, the state of the post. Supported types are published, draft, queue, private
  • tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
  • tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
  • date - a string, the customized GMT that you want
  • format - a string, the format that your post is in. Support types are html or markdown
  • slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

  • title - a string, the title of post that you want. Supports HTML entities.
  • url - a string, the url that you want to create a link post for.
  • description - a string, the desciption of the link that you have
#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api 

anita maity

anita maity

1621858422

Glassmorphism login form using HTML & CSS

From this article, you will learn how to create a Glassmorphism login form with the help of HTML and CSS programming code. glassmorphism is a modern design that is currently used to create a variety of web elements on a large number of websites.

Demo and Download

#html #css #glassmorphism #login form

Florida  Feeney

Florida Feeney

1625823780

Neumorphism Effect Login Form Design Html Css | Login Form Design html css|Neumorphism css

Soft UI login Form , Sign Up Form Design | Css Neumorphic Login Form Design Tutorial | App Login Form UI Design Pure CSS Tutorial

==============================
source code
https://github.com/animationbro/Soft_UI_login_Form01.git

==============================
contact:
https://www.facebook.com/animation.coding

#animationcoding #webdesign_ac

#html #css #effect

DCODE SHOW

DCODE SHOW

1597917413

How To Create Login Form in HTML | Transparent Login Form HTML

https://youtu.be/9WAwuWeb4Yc

#loginformhtml #html #loginpage #css #transparent login form html

wp codevo

wp codevo

1608042207

Responsive Login & Registration Form Using HTML & CSS & JS

https://youtu.be/4XRZWOAf-hQ

#registration form #login form #sign in form #responsive login #html login page