locked
How to use/re-sue custom complex css (like webkit-keyframes mover) in blazor? RRS feed

  • Question

  • User-2009437049 posted

    I am trying to implement css styles in sample application.

    I'm using blazor in an application, but found some problem with UI designing.

    I created a simple Employee form with bootstrap. Now i want to create some styles and then re-use it. This is the actual css which needs to be implemented.

    .register {
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
    margin-top: 3%;
    padding: 3%;
    }

    .register-left {
    text-align: center;
    color: #fff;
    margin-top: 4%;
    }

    .register-left input {
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    width: 60%;
    background: #f8f9fa;
    font-weight: bold;
    color: #383d41;
    margin-top: 30%;
    margin-bottom: 3%;
    cursor: pointer;
    }

    .register-right {
    background: #f8f9fa;
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    }

    .register-left img {
    margin-top: 15%;
    margin-bottom: 5%;
    width: 25%;
    -webkit-animation: mover 2s infinite alternate;
    animation: mover 1s infinite alternate;
    }

    @-webkit-keyframes mover {
    0% {
    transform: translateY(0);
    }

    100% {
    transform: translateY(-20px);
    }
    }

    @keyframes mover {
    0% {
    transform: translateY(0);
    }

    100% {
    transform: translateY(-20px);
    }
    }

    .register-left p {
    font-weight: lighter;
    padding: 12%;
    margin-top: -9%;
    }

    .register .register-form {
    padding: 10%;
    margin-top: 10%;
    }

    .btnRegister {
    float: right;
    margin-top: 10%;
    border: none;
    border-radius: 1.5rem;
    padding: 2%;
    background: #0062cc;
    color: #fff;
    font-weight: 600;
    width: 50%;
    cursor: pointer;
    }

    .register .nav-tabs {
    margin-top: 3%;
    border: none;
    background: #0062cc;
    border-radius: 1.5rem;
    width: 28%;
    float: right;
    }

    .register .nav-tabs .nav-link {
    padding: 2%;
    height: 34px;
    font-weight: 600;
    color: #fff;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    }

    .register .nav-tabs .nav-link:hover {
    border: none;
    }

    .register .nav-tabs .nav-link.active {
    width: 100px;
    color: #0062cc;
    border: 2px solid #0062cc;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    }

    .register-heading {
    text-align: center;
    margin-top: 8%;
    margin-bottom: -15%;
    color: #495057;
    }

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">


    <div class="container">
    <br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com</a></p>
    <hr>





    <div class="card bg-light">
    <article class="card-body mx-auto" style="max-width: 400px;">
    <h4 class="card-title mt-3 text-center">Create Account</h4>
    <p class="text-center">Get started with your free account</p>
    <p>
    <a href="" class="btn btn-block btn-twitter"> <i class="fab fa-twitter"></i> Login via Twitter</a>
    <a href="" class="btn btn-block btn-facebook"> <i class="fab fa-facebook-f"></i> Login via facebook</a>
    </p>
    <p class="divider-text">
    <span class="bg-light">OR</span>
    </p>
    <form>
    <div class="form-group input-group">
    <div class="input-group-prepend">
    <span class="input-group-text"> <i class="fa fa-user"></i> </span>
    </div>
    <input name="" class="form-control" placeholder="Full name" type="text">
    </div> <!-- form-group// -->
    <div class="form-group input-group">
    <div class="input-group-prepend">
    <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
    </div>
    <input name="" class="form-control" placeholder="Email address" type="email">
    </div> <!-- form-group// -->
    <div class="form-group input-group">
    <div class="input-group-prepend">
    <span class="input-group-text"> <i class="fa fa-phone"></i> </span>
    </div>
    <select class="custom-select" style="max-width: 120px;">
    <option selected="">+971</option>
    <option value="1">+972</option>
    <option value="2">+198</option>
    <option value="3">+701</option>
    </select>
    <input name="" class="form-control" placeholder="Phone number" type="text">
    </div> <!-- form-group// -->
    <div class="form-group input-group">
    <div class="input-group-prepend">
    <span class="input-group-text"> <i class="fa fa-building"></i> </span>
    </div>
    <select class="form-control">
    <option selected=""> Select job type</option>
    <option>Designer</option>
    <option>Manager</option>
    <option>Accaunting</option>
    </select>
    </div> <!-- form-group end.// -->
    <div class="form-group input-group">
    <div class="input-group-prepend">
    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
    </div>
    <input class="form-control" placeholder="Create password" type="password">
    </div> <!-- form-group// -->
    <div class="form-group input-group">
    <div class="input-group-prepend">
    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
    </div>
    <input class="form-control" placeholder="Repeat password" type="password">
    </div> <!-- form-group// -->
    <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block"> Create Account </button>
    </div> <!-- form-group// -->
    <p class="text-center">Have an account? <a href="">Log In</a> </p>
    </form>
    </article>
    </div> <!-- card.// -->

    </div>
    <!--container end.//-->

    <br><br>
    <article class="bg-secondary mb-3">
    <div class="card-body text-center">
    <h3 class="text-white mt-3">Bootstrap 4 UI KIT</h3>
    <p class="h5 text-white">Components and templates <br> for Ecommerce, marketplace, booking websites
    and product landing pages</p> <br>
    <p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com
    <i class="fa fa-window-restore "></i></a></p>
    </div>
    <br><br>
    </article>
    The

    <Styled @bind-Classname="@register">
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
    margin-top: 3%;
    padding: 3%;
    </Styled>
    <div class="container @register">
    <div class="row">
    <div class="col-md-4 @register-left">
    </div>
    </div>
    </div>

    @code {
    private string register;
    }
    line reports a problem and I have no idea with it since I'm a newbie with blazor. What should I do in my code?

    Application built with asp. Net core 3.0", "blazor preview 9".

    Output: I tried to follow guides and looked up example implementations but could not solve the issue.

    I am getting the following exception:

    Severity Code Description Project File Line Suppression State
    Error The attribute names could not be inferred from bind attribute 'bind-value'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc. EMS.Client C:\S\S\Client\Pages\AddEm.razor 6
    share edit delete flag
    asked.

    I want to use css styles in blazor razor page. I think I have no option except keeping the css styles in variables and then using it with html elements. Can anyone suggest me? How ll I use key-frames or other complex css styles? – maifs just now.
    Monday, October 21, 2019 1:36 AM

All replies

  • User-1764593085 posted

    Hi fdfdfdf,

    You could try to use @attribute to add css style on the div like:

    <div  @attributes="register" class="container">
        <div class="row">
            <div class="col-md-4 @register-left">
                Test data
            </div>
        </div>
    </div>
    
    @code {
        public Dictionary<string, object> register  =
            new Dictionary<string, object>()
            {        
                {"style", "background: -webkit-linear-gradient(left, #3931af, #00c6ff);margin-top:3%;padding:3%" }
            };
    }

    Tuesday, October 22, 2019 6:39 AM